fix: svg styling

Bandmators · Mar 1, 2024 · 8ab99fa · 8ab99fa
1 parent 86ace99
commit 8ab99fa
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 66 deletions.
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
diff --git a/src/components/common/Checkbox/index.tsx b/src/components/common/Checkbox/index.tsx
@@ -105,7 +105,7 @@ const StyledCheckbox = styled.div<{ checked: boolean; disabled: boolean }>`
 const Icon = styled.svg`
   fill: none;
   stroke: white;
-  stroke-width: 2px;
+  strokewidth: 2px;
 `;
 
 const HiddenCheckbox = styled.input`

diff --git a/src/components/common/Dialog/DialogContent.tsx b/src/components/common/Dialog/DialogContent.tsx
@@ -94,7 +94,7 @@ const Modal = styled.div<{ maxWidth: number | string }>`
     return `${maxWidth}px`;
   }};
   padding: 1.5rem;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   position: fixed;
   top: 50%;
   left: 50%;

diff --git a/src/components/common/Select/Collection.tsx b/src/components/common/Select/Collection.tsx
diff --git a/src/components/common/Select/SelectContent.tsx b/src/components/common/Select/SelectContent.tsx
@@ -65,7 +65,13 @@ export const SelectContent = React.forwardRef<HTMLUListElement, ModalProps>(({ w
         createPortal(
           <>
             <ModalBG onClick={close} className="bmates-modal-bg" />
-            <Modal ref={composeRefs(modalRef, ref)} width={width} position={reorgPos} role="listbox" {...props}>
+            <Modal
+              ref={composeRefs(modalRef, ref)}
+              width={width || toggleRect?.width}
+              position={reorgPos}
+              role="listbox"
+              {...props}
+            >
               {props.children}
             </Modal>
           </>,
@@ -91,11 +97,11 @@ const ModalBG = styled.div`
 
 const Modal = styled.ul<{ width?: React.CSSProperties['width']; position: PositionType }>`
   display: grid;
-  margin: 0.25rem 0px 0px;
+  margin: 0px;
   min-width: max-content;
   ${({ width }) => width && `width: ${typeof width === 'string' ? width : `${width}px`};`}
   padding: 0.25rem;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   position: fixed;
   top: 0px;
   left: 0px;

diff --git a/src/components/common/Select/SelectIcon.tsx b/src/components/common/Select/SelectIcon.tsx
@@ -9,9 +9,9 @@ const SelectIcon = () => {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
       <polyline points="20 6 9 17 4 12"></polyline>
     </SelectSVG>

diff --git a/src/components/common/Select/SelectToggle.tsx b/src/components/common/Select/SelectToggle.tsx
@@ -50,9 +50,9 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, ComponentPropsWi
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           >
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
@@ -66,6 +66,8 @@ SelectToggle.displayName = 'SelectToggle';
 const SelectDownIconWrapper = styled.div`
   margin-left: auto;
   padding-left: 1rem;
+  display: flex;
+  align-items: center;
 `;
 const SelectToggleContent = styled.div`
   overflow: hidden;

diff --git a/src/components/common/Toast/Toast.tsx b/src/components/common/Toast/Toast.tsx
@@ -47,7 +47,7 @@ export const Toast = React.forwardRef<HTMLLIElement, ToastProps>(({ toast, ...pr
         if (action) action(data);
         close();
       }}
-      data-toastData={data}
+      data-toastdata={data}
       {...props}
     >
       {title && <ToastTitle>{title}</ToastTitle>}

diff --git a/src/stories/common/Button.stories.tsx b/src/stories/common/Button.stories.tsx
@@ -79,9 +79,9 @@ export const Icon: Story = {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <line x1="12" y1="5" x2="12" y2="19"></line>
         <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -99,9 +99,9 @@ export const Icon: Story = {
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           >
             <line x1="12" y1="5" x2="12" y2="19"></line>
             <line x1="5" y1="12" x2="19" y2="12"></line>

diff --git a/src/stories/common/Toggle.stories.tsx b/src/stories/common/Toggle.stories.tsx
@@ -37,9 +37,9 @@ export const Default: Story = {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
         <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>