Channel Link: Adjust styles for draggable icon (#5732)

Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>

src/components/common/ManageUsernames.module.scss

@@ -28,14 +28,14 @@
 
 .sortableContainer {
   position: relative;
-
-  :global(.draggable-knob) {
-    margin-top: -0.25rem;
-  }
 }
 
 .item {
   margin-bottom: 0;
   margin-left: -1rem;
   margin-right: -1rem;
+
+  :global(.multiline-item) {
+    padding-inline-end: 3rem;
+  }
 }

src/components/common/ManageUsernames.tsx

@@ -31,7 +31,7 @@ type OwnProps = {
   onEditUsername: (username: string) => void;
 };
 
-const USERNAME_HEIGHT_PX = 60;
+const USERNAME_HEIGHT_PX = 56;
 
 const ManageUsernames: FC<OwnProps> = ({
   chatId,
@@ -170,7 +170,7 @@ const ManageUsernames: FC<OwnProps> = ({
               >
                 <ListItem
                   key={usernameData.username}
-                  className={buildClassName('drag-item mb-2 no-icon', styles.item)}
+                  className={buildClassName('drag-item no-icon', styles.item)}
                   narrow
                   secondaryIcon="more"
                   icon={usernameData.isActive ? 'link' : 'link-broken'}

src/components/left/settings/folders/SettingsFolders.scss

@@ -91,10 +91,6 @@
   position: relative;
 }
 
-.settings-sortable-container .draggable-knob {
-  margin-top: -0.25rem;
-}
-
 .settings-sortable-item .multiline-item {
   padding-inline-end: 3rem;
 }

src/components/left/settings/folders/SettingsFoldersMain.tsx

@@ -49,7 +49,7 @@ type SortState = {
   draggedIndex?: number;
 };
 
-const FOLDER_HEIGHT_PX = 68;
+const FOLDER_HEIGHT_PX = 56;
 const runThrottledForLoadRecommended = throttle((cb) => cb(), 60000, true);
 
 const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
@@ -211,7 +211,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
         {canCreateNewFolder && (
           <Button
           // TODO: Refactor button component to handle icon placemenet with props
-            className="settings-button with-icon mb-2"
+            className="settings-button with-icon"
             color="primary"
             size="smaller"
             pill
@@ -248,7 +248,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
                 >
                   <ListItem
                     key={folder.id}
-                    className="drag-item mb-2 no-icon settings-sortable-item"
+                    className="drag-item no-icon settings-sortable-item"
                     narrow
                     inactive
                     multiline
@@ -279,7 +279,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
                 isDisabled={isBlocked || !isActive}
               >
                 <ListItem
-                  className="drag-item mb-2 no-icon settings-sortable-item"
+                  className="drag-item no-icon settings-sortable-item"
                   narrow
                   secondaryIcon="more"
                   multiline
@@ -335,7 +335,6 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
 
           {recommendedChatFolders.map((folder) => (
             <ListItem
-              className="mb-2"
               narrow
               // eslint-disable-next-line react/jsx-no-bind
               onClick={() => handleCreateFolderFromRecommended(folder)}

src/components/ui/Draggable.module.scss

@@ -19,9 +19,13 @@
 .knob {
   position: absolute;
   top: 50%;
+  transform: translateY(-50%);
   width: 2rem;
   height: 2rem;
 
+  display: grid;
+  place-items: center;
+
   color: var(--color-text-secondary);
   font-size: 1.25rem;
   line-height: 1.75;
@@ -30,7 +34,6 @@
   transition: opacity 150ms;
 
   cursor: grab !important;
-  transform: translateY(-50%);
 
   .container:hover & {
     opacity: 1;
@@ -46,3 +49,7 @@
     touch-action: none;
   }
 }
+
+.icon {
+  font-size: 1.5rem;
+}

src/components/ui/Draggable.tsx

@@ -164,7 +164,7 @@ const Draggable: FC<OwnProps> = ({
           onTouchStart={handleMouseDown}
           style={knobStyle}
         >
-          <Icon name="sort" />
+          <Icon name="sort" className={styles.icon} />
         </div>
       )}
     </div>