From 7139fecb1dc4c9f61d5e0724ae9e239d5a851cb0 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 29 May 2024 14:45:08 +0200
Subject: [PATCH] Fix new layout

---
 .../BookmarkNote/BookmarkNote.module.scss     | 11 ++++
 src/components/BookmarkNote/BookmarkNote.tsx  |  3 +-
 src/components/EmbeddedNote/EmbeddedNote.tsx  |  1 +
 src/components/FeedSelect/FeedSelect.tsx      |  3 +-
 .../HomeHeader/HomeHeader.module.scss         |  2 +-
 src/components/HomeHeader/HomeHeader.tsx      |  2 +-
 src/components/NavLink/NavLink.module.scss    |  3 +-
 src/components/Note/Note.module.scss          | 17 ++++-
 src/components/Note/Note.tsx                  | 66 ++++++++++++-------
 .../Note/NoteFooter/NoteFooter.module.scss    | 30 +++++++--
 src/components/Note/NoteFooter/NoteFooter.tsx | 17 +++--
 src/components/ParsedNote/ParsedNote.tsx      |  6 +-
 .../SelectionBox/SelectionBox.module.scss     | 32 +++++++--
 src/components/SelectionBox/SelectionBox.tsx  |  5 +-
 src/index.scss                                |  4 +-
 15 files changed, 149 insertions(+), 53 deletions(-)

diff --git a/src/components/BookmarkNote/BookmarkNote.module.scss b/src/components/BookmarkNote/BookmarkNote.module.scss
index 218b9e1b..cb92454c 100644
--- a/src/components/BookmarkNote/BookmarkNote.module.scss
+++ b/src/components/BookmarkNote/BookmarkNote.module.scss
@@ -37,3 +37,14 @@
     }
   }
 }
+
+.right {
+  display: flex;
+  justify-content: flex-end;
+  padding-left: 6px !important;
+  padding-right: 0px !important;
+
+  &.rightL {
+    width: 22px !important;
+  }
+}
diff --git a/src/components/BookmarkNote/BookmarkNote.tsx b/src/components/BookmarkNote/BookmarkNote.tsx
index 494594dd..dab17d7d 100644
--- a/src/components/BookmarkNote/BookmarkNote.tsx
+++ b/src/components/BookmarkNote/BookmarkNote.tsx
@@ -16,7 +16,7 @@ import styles from './BookmarkNote.module.scss';
 import { saveBookmarks } from '../../lib/localStore';
 import { importEvents, triggerImportEvents } from '../../lib/notes';
 
-const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) => {
+const BookmarkNote: Component<{ note: PrimalNote, large?: boolean, right?: boolean }> = (props) => {
   const account = useAccountContext();
   const app = useAppContext();
   const intl = useIntl();
@@ -136,6 +136,7 @@ const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) =
   return (
     <div class={styles.bookmark}>
       <ButtonGhost
+        class={`${props.right ? styles.right : ''} ${props.large ? styles.rightL : ''}`}
         onClick={(e: MouseEvent) => {
           e.preventDefault();
 
diff --git a/src/components/EmbeddedNote/EmbeddedNote.tsx b/src/components/EmbeddedNote/EmbeddedNote.tsx
index c1933ba2..ebb41df7 100644
--- a/src/components/EmbeddedNote/EmbeddedNote.tsx
+++ b/src/components/EmbeddedNote/EmbeddedNote.tsx
@@ -118,6 +118,7 @@ const EmbeddedNote: Component<{
           shorten={true}
           isEmbeded={true}
           width={noteContent?.getBoundingClientRect().width}
+          margins={2}
         />
       </div>
     </>
diff --git a/src/components/FeedSelect/FeedSelect.tsx b/src/components/FeedSelect/FeedSelect.tsx
index e47c6918..44ab4a5b 100644
--- a/src/components/FeedSelect/FeedSelect.tsx
+++ b/src/components/FeedSelect/FeedSelect.tsx
@@ -8,7 +8,7 @@ import { FeedOption, PrimalFeed, SelectionOption } from '../../types/primal';
 import SelectBox from '../SelectBox/SelectBox';
 import SelectionBox from '../SelectionBox/SelectionBox';
 
-const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
+const FeedSelect: Component<{ isPhone?: boolean, id?: string, big?: boolean}> = (props) => {
 
   const account = useAccountContext();
   const home = useHomeContext();
@@ -123,6 +123,7 @@ const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => {
       value={selectedValue()}
       isSelected={isSelected}
       isPhone={props.isPhone}
+      big={props.big}
     />
   );
 }
diff --git a/src/components/HomeHeader/HomeHeader.module.scss b/src/components/HomeHeader/HomeHeader.module.scss
index c0dc5c18..33471d49 100644
--- a/src/components/HomeHeader/HomeHeader.module.scss
+++ b/src/components/HomeHeader/HomeHeader.module.scss
@@ -155,7 +155,7 @@
   outline: none;
 
   padding-block: 21px;
-  padding-inline: 12px;
+  padding-inline: 20px;
   border: none;
   border-radius: 0;
   justify-content: flex-start;
diff --git a/src/components/HomeHeader/HomeHeader.tsx b/src/components/HomeHeader/HomeHeader.tsx
index ecad786c..74e904eb 100644
--- a/src/components/HomeHeader/HomeHeader.tsx
+++ b/src/components/HomeHeader/HomeHeader.tsx
@@ -119,7 +119,7 @@ const HomeHeader: Component< {
         <Show
           when={settings?.availableFeeds && settings?.availableFeeds.length > 0 && home?.selectedFeed}
         >
-          <FeedSelect />
+          <FeedSelect big={true} />
         </Show>
 
         <Show
diff --git a/src/components/NavLink/NavLink.module.scss b/src/components/NavLink/NavLink.module.scss
index e42bd9be..59ec8a5e 100644
--- a/src/components/NavLink/NavLink.module.scss
+++ b/src/components/NavLink/NavLink.module.scss
@@ -115,10 +115,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 18px;
+  min-width: 18px;
   height: 18px;
 
   margin-left: 2px;
+  margin-top: -8px;
 
   font-family: 'Roboto Condensed';
   font-weight: 500;
diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
index 7d1336d9..77e98559 100644
--- a/src/components/Note/Note.module.scss
+++ b/src/components/Note/Note.module.scss
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  padding: 12px;
+  padding: 12px 20px;
   margin: 0px;
 
   text-decoration: none;
@@ -361,12 +361,16 @@
   background-color: var(--background-card);
   display: flex;
   flex-direction: column;
-  padding-inline: 12px;
+  padding-inline: 0px;
   padding-top: 0;
   padding-bottom: 12px;
   border-radius: 0;
   border: none;
 
+  .header {
+    padding-inline: 12px;
+  }
+
   .content {
     grid-area: content;
     display: flex;
@@ -386,6 +390,7 @@
       line-height: 24px;
       width: 100%;
       margin-bottom: 12px;
+      padding-inline: 12px;
 
       a:hover {
         text-decoration: underline;
@@ -406,6 +411,7 @@
 
     .time {
       padding-block: 20px;
+      padding-inline: 12px;
       border-bottom: 1px solid var(--devider);
       margin-bottom: 16px;
       color: var(--text-tertiary);
@@ -445,6 +451,13 @@
       }
     }
 
+    .topZaps {
+      padding-inline: 12px;
+    }
+
+    .footer {
+      padding-inline: 12px;
+    }
   }
 }
 
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index d1b2dbbf..aff0b7db 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -285,6 +285,7 @@ const Note: Component<{
                   state={reactionsState}
                   updateState={updateReactionsState}
                   customZapInfo={customZapInfo()}
+                  size="short"
                 />
               </div>
             </div>
@@ -301,7 +302,9 @@ const Note: Component<{
         >
           <div class={styles.border}></div>
 
-          <NoteHeader note={props.note} primary={true} />
+          <div class={styles.header}>
+            <NoteHeader note={props.note} primary={true} />
+          </div>
 
           <div class={styles.upRightFloater}>
             <NoteContextTrigger
@@ -313,14 +316,20 @@ const Note: Component<{
           <div class={styles.content}>
 
             <div class={styles.message}>
-              <ParsedNote note={props.note} width={Math.min(640, window.innerWidth)} />
+              <ParsedNote
+                note={props.note}
+                width={Math.min(640, window.innerWidth)}
+                margins={12}
+              />
             </div>
 
-            <NoteTopZaps
-              topZaps={reactionsState.topZaps}
-              zapCount={reactionsState.zapCount}
-              action={() => openReactionModal('zaps')}
-            />
+            <div class={styles.topZaps}>
+              <NoteTopZaps
+                topZaps={reactionsState.topZaps}
+                zapCount={reactionsState.zapCount}
+                action={() => openReactionModal('zaps')}
+              />
+            </div>
 
             <div
               class={styles.time}
@@ -337,15 +346,17 @@ const Note: Component<{
               </button>
             </div>
 
-            <NoteFooter
-              note={props.note}
-              state={reactionsState}
-              updateState={updateReactionsState}
-              customZapInfo={customZapInfo()}
-              wide={true}
-              large={true}
-              onZapAnim={addTopZap}
-            />
+            <div class={styles.footer}>
+              <NoteFooter
+                note={props.note}
+                state={reactionsState}
+                updateState={updateReactionsState}
+                customZapInfo={customZapInfo()}
+                size="wide"
+                large={true}
+                onZapAnim={addTopZap}
+              />
+            </div>
           </div>
         </div>
       </Match>
@@ -390,6 +401,7 @@ const Note: Component<{
               note={props.note}
               shorten={props.shorten}
               width={Math.min(640, window.innerWidth - 72)}
+              margins={20}
             />
           </div>
 
@@ -406,7 +418,6 @@ const Note: Component<{
             updateState={updateReactionsState}
             customZapInfo={customZapInfo()}
             onZapAnim={addTopZapFeed}
-            wide={true}
           />
         </A>
       </Match>
@@ -457,7 +468,8 @@ const Note: Component<{
                 <ParsedNote
                   note={props.note}
                   shorten={props.shorten}
-                  width={Math.min(528, window.innerWidth - 72)}
+                  width={Math.min(566, window.innerWidth - 72)}
+                  margins={1}
                 />
               </div>
 
@@ -468,13 +480,16 @@ const Note: Component<{
                 topZapLimit={4}
               />
 
-              <NoteFooter
-                note={props.note}
-                state={reactionsState}
-                updateState={updateReactionsState}
-                customZapInfo={customZapInfo()}
-                onZapAnim={addTopZapFeed}
-              />
+              <div class={styles.footer}>
+                <NoteFooter
+                  note={props.note}
+                  state={reactionsState}
+                  updateState={updateReactionsState}
+                  customZapInfo={customZapInfo()}
+                  onZapAnim={addTopZapFeed}
+                  size="short"
+                />
+              </div>
             </div>
           </div>
         </A>
@@ -515,6 +530,7 @@ const Note: Component<{
                   note={props.note}
                   shorten={props.shorten}
                   width={Math.min(528, window.innerWidth - 72)}
+                  margins={12}
                   noLightbox={true}
                   altEmbeds={true}
                 />
diff --git a/src/components/Note/NoteFooter/NoteFooter.module.scss b/src/components/Note/NoteFooter/NoteFooter.module.scss
index e31cfeaf..43291287 100644
--- a/src/components/Note/NoteFooter/NoteFooter.module.scss
+++ b/src/components/Note/NoteFooter/NoteFooter.module.scss
@@ -55,12 +55,34 @@
 
 .footer {
   display: grid;
-  grid-template-columns: 125px 125px 125px 125px auto;
+  grid-template-columns: 145px 145px 145px 145px auto;
   position: relative;
   width: 100%;
 
+  .bookmarkFoot {
+    display: flex;
+    justify-content: flex-end;
+    max-width: 20px;
+  }
+
   &.wide {
-    grid-template-columns: 137px 137px 137px 135px auto;
+    grid-template-columns: 148px 148px 148px 148px auto;
+
+    .bookmarkFoot {
+      display: flex;
+      justify-content: flex-end;
+      max-width: 100%;
+    }
+  }
+
+  &.short {
+    grid-template-columns: 126px 126px 126px 126px auto;
+
+    .bookmarkFoot {
+      display: flex;
+      justify-content: flex-end;
+      max-width: 100%;
+    }
   }
 
   .context {
@@ -172,10 +194,6 @@
     }
   }
 
-  .bookmarkFoot {
-    display: flex;
-    justify-content: flex-end;
-  }
 }
 
 .largeZapLottie {
diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
index 306c0304..3165ee77 100644
--- a/src/components/Note/NoteFooter/NoteFooter.tsx
+++ b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -27,7 +27,7 @@ export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
 
 const NoteFooter: Component<{
   note: PrimalNote,
-  wide?: boolean,
+  size?: 'wide' | 'normal' | 'short',
   id?: string,
   state: NoteReactionsState,
   updateState: SetStoreFunction<NoteReactionsState>,
@@ -48,6 +48,8 @@ const NoteFooter: Component<{
   let footerDiv: HTMLDivElement | undefined;
   let repostMenu: HTMLDivElement | undefined;
 
+  const size = () => props.size || 'normal';
+
   const repostMenuItems: MenuItem[] = [
     {
       action: () => doRepost(),
@@ -61,6 +63,7 @@ const NoteFooter: Component<{
     },
   ];
 
+
   const onClickOutside = (e: MouseEvent) => {
     if (
       !document?.getElementById(`repost_menu_${props.note.post.id}`)?.contains(e.target as Node)
@@ -222,8 +225,8 @@ const NoteFooter: Component<{
         return;
       }
 
-      let newLeft = props.wide ? 15 : 13;
-      let newTop = props.wide ? -6 : -6;
+      let newLeft = size() === 'wide' ? 15 : 13;
+      let newTop = size() === 'wide' ? -6 : -6;
 
       if (props.large) {
         newLeft = 2;
@@ -318,7 +321,12 @@ const NoteFooter: Component<{
   }
 
   return (
-    <div id={props.id} class={`${styles.footer} ${props.wide ? styles.wide : ''}`} ref={footerDiv} onClick={(e) => {e.preventDefault();}}>
+    <div
+      id={props.id}
+      class={`${styles.footer} ${styles[size()]}`}
+      ref={footerDiv}
+      onClick={(e) => e.preventDefault() }
+    >
 
       <Show when={props.state.showZapAnim}>
         <ZapAnimation
@@ -395,6 +403,7 @@ const NoteFooter: Component<{
         <BookmarkNote
           note={props.note}
           large={props.large}
+          right={true}
         />
       </div>
 
diff --git a/src/components/ParsedNote/ParsedNote.tsx b/src/components/ParsedNote/ParsedNote.tsx
index be404b67..67ca9132 100644
--- a/src/components/ParsedNote/ParsedNote.tsx
+++ b/src/components/ParsedNote/ParsedNote.tsx
@@ -147,6 +147,7 @@ const ParsedNote: Component<{
   shorten?: boolean,
   isEmbeded?: boolean,
   width?: number,
+  margins?: number,
   noLightbox?: boolean,
   altEmbeds?: boolean,
 }> = (props) => {
@@ -619,9 +620,10 @@ const ParsedNote: Component<{
         let w: number | undefined = undefined;
 
         if (mVideo) {
+          const margins = props.margins || 20
           const ratio = mVideo.w / mVideo.h;
-          h = (noteWidth() / ratio);
-          w = h > 680 ? 680 * ratio : noteWidth();
+          h = ((noteWidth() - 2*margins) / ratio);
+          w = h > 680 ? 680 * ratio : noteWidth() - 2*margins;
           h = h > 680 ? 680 : h;
         }
 
diff --git a/src/components/SelectionBox/SelectionBox.module.scss b/src/components/SelectionBox/SelectionBox.module.scss
index 772840be..fbfb461a 100644
--- a/src/components/SelectionBox/SelectionBox.module.scss
+++ b/src/components/SelectionBox/SelectionBox.module.scss
@@ -9,13 +9,13 @@
 }
 
 .selectionIcon {
-  width: 14px;
-  height: 14px;
+  width: 10px;
+  height: 10px;
   display: inline-block;
-  margin-inline: 8px;
+  margin-inline: 4px;
   background-color: var(--text-secondary);
-  -webkit-mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px;
-  mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px;
+  -webkit-mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px;
+  mask: url(../../assets/icons/caret.svg) no-repeat 0 0/ 10px 10px;
 }
 
 .selectionBox {
@@ -23,6 +23,28 @@
 }
 
 .trigger {
+  background-color: var(--background-site);
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+
+.selectionIconBig {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  margin-inline: 8px;
+  background-color: var(--text-secondary);
+  -webkit-mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px;
+  mask: url(../../assets/icons/caret.svg) no-repeat 0 / 14px;
+}
+
+.triggerBig {
   background-color: var(--background-site);
   margin: 0;
   padding: 0;
diff --git a/src/components/SelectionBox/SelectionBox.tsx b/src/components/SelectionBox/SelectionBox.tsx
index 7d4fd31c..6d90945e 100644
--- a/src/components/SelectionBox/SelectionBox.tsx
+++ b/src/components/SelectionBox/SelectionBox.tsx
@@ -18,6 +18,7 @@ const SelectionBox: Component<{
   options: SelectionOption[],
   onChange: (option: any) => void,
   initialValue?: string | SelectionOption,
+  big?: boolean,
   value?: string | SelectionOption,
   id?: string,
 }> = (props) => {
@@ -55,12 +56,12 @@ const SelectionBox: Component<{
       onChange={props.onChange}
       gutter={8}
     >
-      <Select.Trigger class={styles.trigger}>
+      <Select.Trigger class={props.big ? styles.triggerBig : styles.trigger}>
         <Select.Value<SelectionOption>>
           {state => state.selectedOption()?.label || ''}
         </Select.Value>
         <Select.Icon>
-          <div class={styles.selectionIcon}></div>
+          <div class={props.big ? styles.selectionIconBig : styles.selectionIcon}></div>
         </Select.Icon>
       </Select.Trigger>
       <Select.Content>
diff --git a/src/index.scss b/src/index.scss
index 794d9dd7..7e4b95f2 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -62,10 +62,10 @@
   --warning-color: #FA3C3C;
   --success-color: #66E205;
 
-  --left-col-w: 188px;
+  --left-col-w: 182px;
   --center-col-w: 640px;
   --right-col-w: 348px;
-  --full-site-w: 1177px;
+  --full-site-w: 1172px;
   --header-height: 84px;
 
   background-color: var(--background-site);