Tweak main timeline UI

src/components/AdvancedSearch/AdvancedSearch.module.scss

@@ -2,14 +2,17 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 0.7;
   }
 }
+
 @keyframes overlayHide {
   from {
     opacity: 0.7;
   }
+
   to {
     opacity: 0;
   }
@@ -20,16 +23,19 @@
     opacity: 0;
     transform: scale(0.96);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
   }
 }
+
 @keyframes contentHide {
   from {
     opacity: 1;
     transform: scale(1);
   }
+
   to {
     opacity: 0;
     transform: scale(0.96);
@@ -169,7 +175,7 @@
       // width: calc(var(--search-input-width) - 60px);
       height: 36px;
       font-weight: 700;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 20px;
       padding: 0;
       margin-left: 10px;
@@ -186,7 +192,7 @@
 
       &::placeholder {
         color: var(--text-tertiary);
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 400;
         line-height: 20px;
       }
@@ -282,12 +288,14 @@
       height: 4px;
       width: 100%;
     }
+
     .fill {
       position: absolute;
       background-color: var(--accent);
       border-radius: 9999px;
       height: 100%;
     }
+
     .thumb {
       display: block;
       width: 20px;
@@ -297,9 +305,11 @@
       top: -8px;
       cursor: grab;
     }
+
     .thumb:hover {
       background-color: var(--text-secondary-2);
     }
+
     .thumb:focus {
       outline: none;
       background-color: var(--text-secondary-2);
@@ -433,6 +443,7 @@
 
 .selectBox {
   display: flex;
+
   .trigger {
     padding-block: 8px;
     padding-left: 16px;
@@ -521,6 +532,7 @@
     font-weight: 600;
     line-height: 20px;
   }
+
   textarea {
     background-color: var(--background-header-input);
     color: var(--text-secondary);
@@ -551,4 +563,4 @@
   font-weight: 300;
   line-height: 8px;
 
-}
+}

src/components/EmbeddedNote/EmbeddedNote.module.scss

@@ -1,10 +1,8 @@
-
 .mentionedNote {
-  border: none;
+  border: 1px solid var(--devider);
   border-radius: 8px;
-  background-color: var(--background-header-input);
   margin-block: 6px;
-  padding: 18px;
+  padding: 12px 12px 4px;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 32px 1fr;
@@ -34,6 +32,8 @@
     color: var(--text-tertiary-2);
 
     .postInfo {
+      position: relative;
+      top: 1px;
       display: flex;
       justify-content: flex-start;
       margin-left: 11px;
@@ -45,8 +45,9 @@
         display: flex;
         align-items: center;
         width: auto;
+
         .userName {
-          font-size: 16px;
+          font-size: 15px;
           line-height: 18px;
           font-weight: 700;
           color: var(--text-primary);
@@ -55,7 +56,9 @@
           white-space: nowrap;
           overflow: hidden;
         }
+
         .verifiedBy {
+          font-size: 14px;
           max-width: 220px;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -64,12 +67,13 @@
         }
       }
 
-      .time{
+      .time {
         margin: 0px 2px;
         min-width: 40px;
-        font-size: 14px;
+        font-size: 13px;
         line-height: 16px;
         font-weight: 400;
+
         &::before {
           content: "|";
           padding: 0px 2px;
@@ -87,6 +91,8 @@
 }
 
 .verifiedIcon {
+  position: relative;
+  top: -1px;
   width: 15px;
   height: 15px;
   display: inline-block;
@@ -99,15 +105,19 @@
 @media only screen and (max-width: 720px) {
   .mentionedNoteHeader {
     width: calc(100vw - 160px);
+
     .postInfo {
       width: calc(100vw - 110px);
+
       .userInfo {
         max-width: calc(100vw - 100px);
         overflow: hidden;
+
         .userName {
           max-width: calc(100vw - 180px);
         }
       }
+
       .verification {
         max-width: 220px;
         text-overflow: ellipsis;
@@ -123,7 +133,7 @@
   overflow: hidden;
   color: var(--text-primary);
   word-break: break-word;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 20px;
-}
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 21px;
+}

src/components/HomeHeader/HomeHeader.module.scss

@@ -5,7 +5,7 @@
 }
 
 .smallHeader {
-  position:absolute;
+  position: absolute;
   height: 76px;
 }
 
@@ -37,6 +37,7 @@
     -webkit-mask: url(../../assets/icons/corner_right.svg) no-repeat center;
     mask: url(../../assets/icons/corner_right.svg) no-repeat center;
   }
+
   .leftCorner {
     display: inline-block;
     width: 4px;
@@ -49,16 +50,17 @@
 }
 
 .smallLeft {
- flex-grow: 20;
- flex-shrink: 1;
- visibility: hidden;
+  flex-grow: 20;
+  flex-shrink: 1;
+  visibility: hidden;
 }
 
 .smallRight {
   max-width: 50%;
   flex-grow: 1;
   margin-bottom: 4px;
   margin-left: 8px;
+
   // margin: auto;
   button {
     font-size: 14px;
@@ -78,7 +80,7 @@
 }
 
 .fixedSelector {
-  position:fixed;
+  position: fixed;
   top: 0px;
   width: var(--central-content-width);
   height: var(--header-height);
@@ -116,7 +118,7 @@
   margin: 0px;
   outline: none;
   width: 100%;
-  height: 54px;
+  height: 42px;
 
   // padding-top: 18px;
   // padding-bottom: 12px;
@@ -138,9 +140,9 @@
 
   .newContentItem {
     color: var(--accent-links);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 600;
     line-height: 15px;
     background: none;
     border: none;
@@ -255,6 +257,7 @@
       display: flex;
       align-items: center;
       height: 40px;
+
       .avatar {
         // border: solid 2px var(--text-primary-button);
         // border-radius: 50%;
@@ -302,6 +305,7 @@
       display: flex;
       align-items: center;
       height: 40px;
+
       .avatar {
         border: solid 2px var(--text-primary-button);
         border-radius: 50%;
@@ -337,17 +341,19 @@
   .fullHeader {
     width: 100%;
   }
+
   .smallHeader {
     width: 100%;
   }
+
   .fixedSelector {
     width: 100%;
   }
 }
 
 .toggleAnimation {
   position: absolute;
-  width:fit-content;
+  width: fit-content;
   height: fit-content;
   padding: 8px;
   top: 10px;
@@ -358,4 +364,4 @@
   z-index: 200;
   border: none;
   outline: none;
-}
+}

src/components/Layout/Layout.module.scss

@@ -86,6 +86,7 @@
 
 .centerContent {
   width: var(--center-col-w);
+
   .headerFloater {
     position: fixed;
     opacity: 0;
@@ -118,6 +119,7 @@
 
   &.messagesColumn {
     height: 85px;
+
     >div {
       height: 85px;
       border-left: none;
@@ -140,6 +142,7 @@
   position: fixed;
   // background-color: var(--background-site);
   z-index: var(--z-index-header);
+  padding: 14px 0 0;
 
   >div {
     display: flex;
@@ -164,9 +167,11 @@
 
 .rightContent {
   margin-top: 92px;
+
   >div {
     margin-left: 24px;
   }
+
   &.exploreHeader {
     margin-top: 20px;
   }
@@ -181,8 +186,8 @@
   width: 0px;
   height: 0px;
   position: absolute;
-  top:0;
-  left:0;
+  top: 0;
+  left: 0;
 }
 
 @media only screen and (max-width: 1300px) {
@@ -221,6 +226,7 @@
 
   .rightColumn {
     width: 1px;
+
     >div {
       >div {
         display: none;
@@ -295,10 +301,11 @@
 
   .rightColumn {
     width: 1px;
+
     >div {
       >div {
         display: none;
       }
     }
   }
-}
+}