Improve getting started column (#7676)

* Adjust footer of getting started column

- Improved style
- Moved hotkeys, about this instance and logout to footer
- Removed FAQ, User Guide, Apps links
- Use hamburger icon for the column

* Add edit profile action button to profile and more to dropdown

* Add "Trending now" to getting started column

* Add preferences/security links on mobile layout

1 files changed, 49 insertions, 22 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c93d8e86a..c13dc1a05 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1663,24 +1663,6 @@ a.account__display-name {
   vertical-align: middle;
 }
 
-.static-content {
-  padding: 10px;
-  padding-top: 20px;
-  color: $dark-text-color;
-
-  h1 {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 40px;
-    text-align: center;
-  }
-
-  p {
-    font-size: 13px;
-    margin-bottom: 20px;
-  }
-}
-
 .columns-area {
   display: flex;
   flex: 1 1 auto;
@@ -1772,6 +1754,8 @@ a.account__display-name {
     margin-bottom: 0;
   }
 
+  .getting-started__wrapper,
+  .getting-started__trends,
   .search {
     margin-bottom: 10px;
   }
@@ -2175,7 +2159,8 @@ a.account__display-name {
 }
 
 .getting-started__wrapper,
-.getting_started {
+.getting-started,
+.flex-spacer {
   background: $ui-base-color;
 }
 
@@ -2184,16 +2169,58 @@ a.account__display-name {
   overflow-y: auto;
 }
 
+.flex-spacer {
+  flex: 1 1 auto;
+}
+
 .getting-started {
-  background: $ui-base-color;
   flex: 1 0 auto;
+  color: $dark-text-color;
 
   p {
-    color: $secondary-text-color;
+    color: $dark-text-color;
+    font-size: 13px;
+    margin-bottom: 20px;
+
+    a {
+      color: $dark-text-color;
+      text-decoration: underline;
+    }
   }
 
   a {
-    color: $dark-text-color;
+    text-decoration: none;
+    color: $darker-text-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+    padding: 10px;
+    padding-top: 20px;
+
+    ul {
+      margin-bottom: 10px;
+    }
+
+    ul li {
+      display: inline;
+    }
+  }
+
+  &__trends {
+    background: $ui-base-color;
+    flex: 1 1 auto;
+  }
+
+  &__scrollable {
+    max-height: 100%;
+    overflow-y: auto;
   }
 }