From c459db5813c1102a2f31479bd9fadea56abc5e88 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 26 Oct 2023 00:41:04 +0300
Subject: [PATCH] Voters list style fixes

---
 .../ProfileSettingsNavigation.module.scss     | 20 +++++++++++++++----
 .../_shared/Popup/Popup.module.scss           | 10 ++++++----
 .../_shared/VotersList/VotersList.module.scss | 10 +++++++---
 .../_shared/VotersList/VotersList.tsx         |  6 +++++-
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss b/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss
index 5557d067..8c860c4c 100644
--- a/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss
+++ b/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss
@@ -1,6 +1,5 @@
 .navigationHeader {
   @include font-size(1.8rem);
-
   font-weight: bold;
   margin-top: 1.1em;
 }
@@ -8,12 +7,25 @@
 .navigation {
   @include font-size(1.4rem);
 
+  @include media-breakpoint-down(md) {
+    display: flex;
+
+    li {
+      margin-right: 2.4rem;
+    }
+  }
+
+  a {
+    border: none;
+  }
+
   .active {
     a {
-      text-decoration: none;
-      color: var(--default-color-invert);
-      background: var(--background-color-invert);
+      border-bottom: 2px solid;
       cursor: inherit;
+      font-weight: bold;
+      pointer-events: none;
+      text-decoration: none;
     }
   }
 }
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index d16a0e05..79985fd6 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -31,7 +31,6 @@
 
   &.bordered {
     @include font-size(1.6rem);
-
     border: 2px solid #000;
     padding: 2.4rem;
 
@@ -46,7 +45,6 @@
 
   &.tiny {
     @include font-size(1.4rem);
-
     box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
     padding: 1rem;
 
@@ -60,8 +58,12 @@
   }
 
   &.horizontalAnchorCenter {
-    left: 50%;
-    transform: translateX(-50%);
+    left: -24px;
+
+    @include media-breakpoint-up(md) {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &.horizontalAnchorRight {
diff --git a/src/components/_shared/VotersList/VotersList.module.scss b/src/components/_shared/VotersList/VotersList.module.scss
index ebfdc439..a36497ed 100644
--- a/src/components/_shared/VotersList/VotersList.module.scss
+++ b/src/components/_shared/VotersList/VotersList.module.scss
@@ -17,14 +17,18 @@
       align-items: center;
       margin-right: 1.2rem;
 
-      a {
+      a:link {
         text-decoration: none;
         border: none;
+
+        &:hover {
+          background: #000;
+          color: #fff;
+        }
       }
 
       .userpic {
-        width: 24px;
-        height: 24px;
+        margin-right: 0.8rem;
       }
     }
   }
diff --git a/src/components/_shared/VotersList/VotersList.tsx b/src/components/_shared/VotersList/VotersList.tsx
index a470eae3..f71fadf9 100644
--- a/src/components/_shared/VotersList/VotersList.tsx
+++ b/src/components/_shared/VotersList/VotersList.tsx
@@ -22,7 +22,11 @@ export const VotersList = (props: Props) => {
             {(reaction) => (
               <li class={styles.item}>
                 <div class={styles.user}>
-                  <Userpic name={reaction.createdBy.name} userpic={reaction.createdBy.userpic} />
+                  <Userpic
+                    name={reaction.createdBy.name}
+                    userpic={reaction.createdBy.userpic}
+                    class={styles.userpic}
+                  />
                   <a href={`/author/${reaction.createdBy.slug}`}>{reaction.createdBy.name || ''}</a>
                 </div>
                 {reaction.kind === ReactionKind.Like ? (