Language icon with Arabic glyph; normalize button styling.

samvera-labs · Nov 26, 2024 · 1821771 · 1821771
1 parent b412d7f
commit 1821771
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git a/src/components/Scroll/Panel/Language/Language.styled.tsx b/src/components/Scroll/Panel/Language/Language.styled.tsx
@@ -9,13 +9,19 @@ import { styled } from "src/styles/stitches.config";
 
 const StyledScrollLanguage = styled("div", {
   width: "2rem",
+  height: "2rem",
 
   [`${StyledTrigger}`]: {
     background: "$primary",
     width: "inherit",
+    height: "inherit",
     display: "flex",
     justifyContent: "center",
     borderRadius: "2rem",
+    padding: "0",
+    justifyItems: "center",
+    flexDirection: "column",
+    alignItems: "center",
 
     "&:hover": {
       background: "$accent",
@@ -58,6 +64,11 @@ const StyledScrollLanguageOption = styled(Checkbox.Root, {
   alignContent: "center",
   alignItems: "center",
   gap: "0.5rem",
+  backgroundColor: "transparent",
+  border: "none",
+  fontFamily: "inherit",
+  fontSize: "1rem",
+  marginTop: "0.25rem",
 
   "&[data-state='checked']": {
     [`${StyledScrollLanguageOptionCheckbox}`]: {

diff --git a/src/components/Scroll/Panel/Language/Language.tsx b/src/components/Scroll/Panel/Language/Language.tsx
@@ -16,7 +16,9 @@ const LanguageIcon = ({
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={style}>
       <title>{title}</title>
-      <path d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zM267.84 342.92a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z" />
+      <path d="m455.77,49.65c-.53-.94-1.53-1.52-2.61-1.52h-1.46c-.9,0-1.76.41-2.33,1.11-7.48,9.2-14.92,20.42-22.14,33.34-.49.87-.51,1.93-.05,2.82,14.51,28.46,28.67,57.32,28.8,70.41-.1.12-.38.35-.96.57-.05.02-.1.04-.15.06-11.86,5.21-25.25,8.74-37.93,11.77-35.75,8.37-68.11,12.45-98.93,12.45-37.86,0-69.49-6.59-91.47-19.05-24.29-13.77-36.6-34.28-36.6-60.96,0-12.24,2.79-26.82,8.29-43.33.49-1.48-.23-3.1-1.67-3.71l-11.65-4.95c-1.43-.61-3.09-.02-3.82,1.35-11.8,22.23-17.54,45.74-17.54,71.9,0,35.09,14.3,62.03,42.49,80.08,24.82,15.89,60.52,24.29,103.24,24.29,57.18,0,132.5-18.87,159.14-35.1.42-.25.77-.61,1.02-1.03,8.99-15.08,15.86-28.36,15.86-50.18,0-35.58-22.59-78.13-29.52-90.32Z" />
+      <path d="m321.24,273.28c-1.26-.92-3.01-.72-4.03.45-8.38,9.62-16.7,20.51-23.73,29.88-.95,1.27-.75,3.06.46,4.09,2.19,1.86,4.38,3.71,6.55,5.54,9.53,8.05,18.54,15.66,27.7,24.35.58.55,1.32.82,2.06.82.69,0,1.38-.24,1.95-.72,9.71-8.28,17.81-17.85,24.79-29.26.71-1.16.55-2.65-.39-3.63-11.73-12.33-23.62-22.94-35.36-31.52Z" />
+      <path d="m256.38,433.6l-90-218c-4.64-11.23-17.5-16.58-28.73-11.94-5.41,2.23-9.71,6.53-11.94,11.94l-90,218c-4.69,11.21.59,24.1,11.8,28.79,11.21,4.69,24.1-.59,28.79-11.8.03-.07.06-.14.08-.2l18.33-44.39h102.67l18.33,44.39c3.4,8.24,11.43,13.61,20.34,13.61,12.15,0,21.99-9.86,21.99-22.01,0-2.88-.57-5.73-1.67-8.39h0Zm-143.5-71.6l33.17-80.35,33.17,80.35h-66.34Z" />
     </svg>
   );
 };
@@ -35,7 +37,7 @@ const ScrollLanguage = () => {
         <Popover.Trigger>
           <LanguageIcon
             title="language"
-            style={{ width: "16px", height: "16px" }}
+            style={{ width: "18px", height: "18px" }}
           />
         </Popover.Trigger>
         <Popover.Content>

diff --git a/src/components/Scroll/Panel/Search/Form.tsx b/src/components/Scroll/Panel/Search/Form.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from "react";
+import React, { MouseEvent, useContext, useEffect, useRef } from "react";
 import {
   StyledSearchBackButton,
   StyledSearchForm,
@@ -10,8 +10,12 @@ import { ScrollContext } from "src/context/scroll-context";
 
 const SearchIcon: React.FC = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <title>Search</title>
+    <svg
+      style={{ width: "16px", height: "16px" }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <title>search</title>
       <path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" />
     </svg>
   );
@@ -20,7 +24,7 @@ const SearchIcon: React.FC = () => {
 const CloseIcon: React.FC = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <title>Close</title>
+      <title>close</title>
       <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" />
     </svg>
   );
@@ -42,7 +46,10 @@ const PanelToggle: React.FC<PanelToggleProps> = ({
   const handleFocus = () =>
     inputRef.current === document.activeElement && togglePanel(true);
 
-  const focusInput = () => inputRef?.current?.focus();
+  const focusInput = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    inputRef?.current?.focus();
+  };
 
   const blurInput = () => {
     inputRef.current?.blur();

diff --git a/src/components/Scroll/Panel/Search/Search.styled.tsx b/src/components/Scroll/Panel/Search/Search.styled.tsx
@@ -56,7 +56,6 @@ const StyledSearchInput = styled("input", {
   margin: "0",
   background: "none",
   zIndex: "2",
-  height: "2rem",
   justifyContent: "center",
   display: "flex",
   alignItems: "center",
@@ -71,17 +70,22 @@ const StyledSearchInput = styled("input", {
   width: "2rem",
 });
 
-const StyledSearchIcon = styled("span", {
+const StyledSearchIcon = styled("button", {
   position: "absolute",
   zIndex: "3",
-  width: "2rem",
-  height: "2rem",
-  padding: "8px",
+  border: "none",
   color: "$secondary !important",
   fill: "$secondary !important",
   stroke: "$secondary !important",
   transition: "$all",
   cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  borderRadius: "2rem",
+  height: "2rem",
+  width: "2rem",
 
   svg: {
     color: "inherit",
@@ -117,6 +121,7 @@ const StyledSearchForm = styled("form", {
   justifyContent: "space-between",
   transition: "$all",
   flexGrow: "1",
+  height: "2rem",
 
   variants: {
     isPanelExpanded: {