fix: Responsive label color selector, improve action button styles (#1184)

client/src/components/labels/LabelsStep/AddStep.jsx

@@ -15,8 +15,6 @@ import { useForm } from '../../../hooks';
 import LABEL_COLORS from '../../../constants/LabelColors';
 import Editor from './Editor';
 
-import styles from './AddStep.module.scss';
-
 const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -52,7 +50,7 @@ const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
           <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.createLabel')} className={styles.submitButton} />
+          <Button positive content={t('action.createLabel')} />
         </Form>
       </Popup.Content>
     </>

client/src/components/labels/LabelsStep/AddStep.module.scss

@@ -1,10 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-:global(#app) {
-  .submitButton {
-    margin-top: 12px;
-  }
-}

client/src/components/labels/LabelsStep/EditStep.jsx

@@ -91,13 +91,16 @@ const EditStep = React.memo(({ labelId, onBack }) => {
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
           <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.save')} className={styles.submitButton} />
+          <div className={styles.actions}>
+            <Button positive content={t('action.save')} />
+            <Button
+              type="button"
+              content={t('action.delete')}
+              className={styles.deleteButton}
+              onClick={handleDeleteClick}
+            />
+          </div>
         </Form>
-        <Button
-          content={t('action.delete')}
-          className={styles.deleteButton}
-          onClick={handleDeleteClick}
-        />
       </Popup.Content>
     </>
   );

client/src/components/labels/LabelsStep/EditStep.module.scss

@@ -4,14 +4,14 @@
  */
 
 :global(#app) {
-  .deleteButton {
+  .actions {
-    bottom: 12px;
+    align-items: center;
-    box-shadow: 0 1px 0 #cbcccc;
+    display: flex;
-    position: absolute;
+    gap: 12px;
-    right: 9px;
+    justify-content: space-between;
   }
 
-  .submitButton {
+  .deleteButton {
-    margin-top: 12px;
+    box-shadow: 0 1px 0 #cbcccc;
   }
 }

client/src/components/labels/LabelsStep/Editor.module.scss

@@ -5,12 +5,8 @@
 
 :global(#app) {
   .colorButton {
-    float: left;
+    margin: 0;
-    height: 30px;
-    margin: 3px;
-    padding: 0;
     position: relative;
-    width: 41.6px;
 
     &:hover {
       opacity: 0.9;
@@ -18,28 +14,43 @@
   }
 
   .colorButtonActive:before {
-    bottom: 1px;
     color: #ffffff;
     content: "Г";
     font-size: 16px;
     line-height: 32px;
     position: absolute;
-    right: 4px;
+    right: calc(50% - 5px);
     text-align: center;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
+    top: calc(50% - 17px);
     transform: rotate(-135deg);
-    width: 32px;
   }
 
   .colorButtons {
-    margin: -3px;
+    display: grid;
-    padding-bottom: 16px;
+    gap: 6px;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    margin-bottom: 12px;
+    max-height: 60vh;
+    overflow-y: auto;
 
-    &:after {
+    @supports (-moz-appearance: none) {
-      clear: both;
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
-      content: "";
+      scrollbar-width: thin;
-      display: table;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
     }
   }
 

client/src/lib/popup/Popup.module.css

@@ -3,7 +3,7 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
- .closeButton {
+.closeButton {
   background: transparent !important;
   box-shadow: none !important;
   margin: 0 !important;