styling improvements

nknapp · Aug 18, 2024 · e4e1104 · e4e1104
1 parent 6707e36
commit e4e1104
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/src/components/solid/atoms/SimpleButton.tsx b/src/components/solid/atoms/SimpleButton.tsx
@@ -20,12 +20,12 @@ export interface SimpleButtonProps {
 export const SimpleButton: Component<SimpleButtonProps> = (props) => {
   const ready = isReady();
   const disabled = createMemo(() => !ready || props.disabled);
-  const { buttonClasses, iconClasses } = createButtonClasses(() => props);
+  const { buttonClasses, iconClasses, labelClasses } = createButtonClasses(() => props);
 
   return (
     <button class={buttonClasses()} onClick={(event) => props.onClick?.(event)} disabled={disabled()}>
       {props.icon && <props.icon class={iconClasses()} />}
-      <span class={cls(props.hideLabel && "sr-only")}>{props.label}</span>
+      <span class={cls(props.hideLabel && "sr-only", labelClasses())}>{props.label}</span>
       {props.children}
     </button>
   );

diff --git a/src/components/solid/hooks/createButtonClasses.ts b/src/components/solid/hooks/createButtonClasses.ts
@@ -51,17 +51,21 @@ export const createButtonClasses = (props: Accessor<ButtonClassProps>) => {
     buttonClasses: createMemo(() => {
       return cls(
         props().class,
-        "flex items-center justify-center border rounded whitespace-nowrap truncate print:p-1 transition-all duration-100 hover:no-underline",
+        "flex items-center justify-center border rounded whitespace-nowrap print:p-1 transition-all duration-100 hover:no-underline",
         "active:outline",
         "disabled:grayscale disabled:opacity-50",
         "bg-white",
+        "truncate",
         highlighted() && highlightClasses,
         highlighted() ? highlightedColorClasses[color()] : colorClasses[color()],
         sizeClasses[size()],
       );
     }),
     iconClasses: createMemo(() => {
-      return cls(iconSize[size()], iconColor[color()]);
+      return cls(iconSize[size()], iconColor[color()], "flex-shrink-0");
+    }),
+    labelClasses: createMemo(() => {
+      return cls("flex-shrink", "truncate");
     }),
   };
 };
diff --git a/src/components/solid/organisms/Reader/Reader.tsx b/src/components/solid/organisms/Reader/Reader.tsx
@@ -125,7 +125,7 @@ const Player: Component<{
           <div class={"h-8 w-full flex"}>
             <For each={props.youtube}>
               {(link) => {
-                return <YoutubePlayButton type="button" class={"flex-1"} link={link} />;
+                return <YoutubePlayButton type={"button"} class={"flex-1"} link={link} />;
               }}
             </For>
           </div>

diff --git a/src/components/solid/organisms/TechniqueChooser/ExamSheet.tsx b/src/components/solid/organisms/TechniqueChooser/ExamSheet.tsx
@@ -63,16 +63,20 @@ const ShowDirections: Component<DirectionsProps> = (props) => {
         <YoutubeLink metadata={props.directions[SINGLE_DIRECTION]} />
       </Match>
       <Match when={!singleDirection()}>
-        <ForEntries object={props.directions} separator={","}>
-          {(direction, metadata) => {
-            return (
-              <span>
-                {direction}
-                <YoutubeLink metadata={metadata} />
-              </span>
-            );
-          }}
-        </ForEntries>
+        <span class={"text-sm"}>
+          (
+          <ForEntries object={props.directions} separator={", "}>
+            {(direction, metadata) => {
+              return (
+                <span>
+                  {direction}
+                  <YoutubeLink metadata={metadata} />
+                </span>
+              );
+            }}
+          </ForEntries>
+          )
+        </span>
       </Match>
     </Switch>
   );