Update MultiSelectInput and InputContainer

Author: shreeyash07

packages/ui/src/components/InputContainer/styles.module.css

@@ -11,7 +11,7 @@
 
         .input {
             padding-left:12px;
-            height: 32px;
+            height: 24px;
         }
     }
 

packages/ui/src/components/SelectInputContainer/i18n.json

@@ -5,6 +5,7 @@
         "infoMessageMore":"more",
         "buttonTitleSelect":"Select all",
         "buttonTitleClear":"Clear",
+        "buttonClearAll":"Clear All",
         "buttonTitleClose":"Close",
         "buttonTitleOpen":"Open",
         "selectInputPendingMessage":"Fetching options...",

packages/ui/src/components/SelectInputContainer/index.tsx

@@ -3,9 +3,9 @@ import React, {
     useRef,
 } from 'react';
 import {
-    ArrowDownSmallFillIcon,
-    ArrowUpSmallFillIcon,
     CheckDoubleFillIcon,
+    ChevronDownLineIcon,
+    ChevronUpLineIcon,
     CloseLineIcon,
 } from '@ifrc-go/icons';
 import {
@@ -304,17 +304,6 @@ function SelectInputContainer<
                                 <CheckDoubleFillIcon className={styles.icon} />
                             </Button>
                         )}
-                        {!readOnly && !nonClearable && hasValue && (
-                            <Button
-                                onClick={onClearButtonClick}
-                                disabled={disabled}
-                                variant="tertiary"
-                                name={undefined}
-                                title={strings.buttonTitleClear}
-                            >
-                                <CloseLineIcon className={styles.icon} />
-                            </Button>
-                        )}
                         {!readOnly && (
                             <Button
                                 onClick={handleToggleDropdown}
@@ -325,8 +314,8 @@ function SelectInputContainer<
                                     : strings.buttonTitleOpen}
                             >
                                 {dropdownShownActual
-                                    ? <ArrowUpSmallFillIcon className={styles.icon} />
-                                    : <ArrowDownSmallFillIcon className={styles.icon} />}
+                                    ? <ChevronUpLineIcon className={styles.icon} />
+                                    : <ChevronDownLineIcon className={styles.icon} />}
                             </Button>
                         )}
                     </>
@@ -355,6 +344,21 @@ function SelectInputContainer<
                     parentRef={inputSectionRef}
                     className={_cs(optionsPopupClassName, styles.popup)}
                 >
+                    {!readOnly && !nonClearable && hasValue && !disabled && (
+                        <div className={styles.clearButton}>
+                            <Button
+                                onClick={onClearButtonClick}
+                                disabled={disabled}
+                                variant="secondary"
+                                name={undefined}
+                                title={strings.buttonTitleClear}
+                            >
+                                {strings.buttonClearAll}
+                                <CloseLineIcon className={styles.icon} />
+                            </Button>
+                            <div className={styles.clearAllBorder} />
+                        </div>
+                    )}
                     <List<OPTION, OPTION_KEY, GenericOptionProps<RENDER_PROPS, OPTION_KEY, OPTION>>
                         className={styles.list}
                         data={options}

packages/ui/src/components/SelectInputContainer/styles.module.css

@@ -1,5 +1,15 @@
 .popup {
-    padding: var(--go-ui-spacing-sm) 0;
+    padding: var(--go-ui-spacing-sm);
+
+    .clear-button {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xs);
+
+        .clear-all-border {
+            border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-primary-red);
+        }
+    }
 
     .list {
         display: flex;

packages/ui/src/components/Tabs/Tab/styles.module.css

@@ -89,7 +89,7 @@
 
             .step-circle {
                 position: absolute;
-                left: 40%;
+                left: 45%;
                 flex-shrink: 0;
                 transition: var(--go-ui-duration-transition-slow) border-color ease-in-out;
                 border: var(--border-width) solid transparent;