Fix icon typo. Adjust ascent icon with sizes.

plezanje-net · Nov 11, 2023 · 137bd2d · 137bd2d
1 parent 74a7be5
commit 137bd2d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 31 deletions.
diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list.tsx
@@ -239,8 +239,8 @@ function CragRouteList({ routes, crag, ascents }: Props) {
 
               {/* Logged in user's acents of a route */}
               {cragRoutesState.selectedColumns.includes("myAscents") && (
-                <th className="w-16 min-w-16 py-4 pl-4 pr-0 text-center">
-                  <IconCheck className="inline-block" />
+                <th className="min-w-10 w-10 py-4 pl-4 pr-0">
+                  <IconCheck />
                 </th>
               )}
             </tr>

diff --git a/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx b/src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
@@ -92,7 +92,7 @@ function CragRoute({ crag, route, ascent }: Props) {
       {/* Logged in user's acents of a route */}
       {displayColumn("myAscents") && (
         <td className="py-4 pl-4 pr-0 text-center">
-          {ascent && <AscentIcon className="inline-block" ascent={ascent} />}
+          {ascent && <AscentIcon ascent={ascent} size={IconSize.regular} />}
         </td>
       )}
     </tr>
@@ -145,7 +145,7 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
               <RouteComments route={route} size={IconSize.small} />
             )}
             {displayColumn("myAscents") && ascent && (
-              <AscentIcon ascent={ascent} size="small" />
+              <AscentIcon ascent={ascent} size={IconSize.small} />
             )}
           </div>
         </div>

diff --git a/src/app/[lang]/crag/[cragSlug]/gallery/components/image-list/image-list-element.tsx b/src/app/[lang]/crag/[cragSlug]/gallery/components/image-list/image-list-element.tsx
@@ -1,3 +1,4 @@
+import { IconSize } from "@/components/ui/icons/icon-size";
 import IconPhoto from "@/components/ui/icons/photo";
 import { Image } from "@/graphql/generated";
 import NextImage from "next/image";
@@ -25,7 +26,7 @@ function ImageListElement({ image, baseUrl }: TImageListElementParams) {
       {title && <div className="pt-2">{title}</div>}
       {author && (
         <div className="text-sm">
-          <IconPhoto className="inline pr-1" size="small" />
+          <IconPhoto className="inline pr-1" size={IconSize.small} />
           {author}
         </div>
       )}

diff --git a/src/app/sandbox/select/page.tsx b/src/app/sandbox/select/page.tsx
@@ -118,7 +118,11 @@ function SelectPage() {
             <Option id="4" value="krvavica">
               Krvavica
             </Option>
-            <Option id="5" value="klobasa" icon={<IconAid />}>
+            <Option
+              id="5"
+              value="klobasa"
+              icon={<IconAid size={IconSize.small} />}
+            >
               Klobasa
             </Option>
             <Option id="6" value="sunka">

diff --git a/src/components/ui/ascent-icon.tsx b/src/components/ui/ascent-icon.tsx
@@ -1,34 +1,33 @@
 import IconAid from "./icons/aid";
 import IconAllFree from "./icons/all-free";
-import IconClose from "./icons/close";
+import IconAttempt from "./icons/attempt";
 import IconFlash from "./icons/flash";
-import { IconSize } from "./icons/icon";
+import { IconSize } from "./icons/icon-size";
 import IconOnsight from "./icons/onsight";
 import IconRedPoint from "./icons/red-point";
 import IconRepeat from "./icons/repeat";
 
 interface Props {
   ascent: string;
-  size?: IconSize;
-  className?: string;
+  size: IconSize.small | IconSize.regular;
 }
 
-function AscentIcon({ ascent, size, className }: Props) {
+function AscentIcon({ ascent, size }: Props) {
   switch (ascent) {
     case "onsight":
-      return <IconOnsight className={className} size={size} />;
+      return <IconOnsight size={size} />;
     case "flash":
-      return <IconFlash className={className} size={size} />;
+      return <IconFlash size={size} />;
     case "redpoint":
-      return <IconRedPoint className={className} size={size} />;
+      return <IconRedPoint size={size} />;
     case "repeat":
-      return <IconRepeat className={className} size={size} />;
+      return <IconRepeat size={size} />;
     case "allfree":
-      return <IconAllFree className={className} size={size} />;
+      return <IconAllFree size={size} />;
     case "aid":
-      return <IconAid className={className} size={size} />;
+      return <IconAid size={size} />;
     case "attempt":
-      return <IconClose className={className} size={size} />;
+      return <IconAttempt size={size} />;
   }
 
   return <></>;

diff --git a/src/components/ui/icons/all-free.tsx b/src/components/ui/icons/all-free.tsx
@@ -1,10 +1,36 @@
-import Icon, { IconProps } from "./icon";
+import { IconSize } from "./icon-size";
 
-function IconAllFree(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="M2.99998 20C2.51664 20 2.19998 19.7707 2.04998 19.312C1.89998 18.854 2.01664 18.4833 2.39998 18.2L11 11.75V10C11 9.71667 11.0916 9.479 11.275 9.287C11.4583 9.09567 11.6916 9 11.975 9C12.4083 9.01667 12.7706 8.879 13.062 8.587C13.354 8.29567 13.5 7.93333 13.5 7.5C13.5 7.08333 13.354 6.72933 13.062 6.438C12.7706 6.146 12.4166 6 12 6C11.5833 6 11.2293 6.146 10.938 6.438C10.646 6.72933 10.5 7.08333 10.5 7.5H8.49998C8.49998 6.53333 8.84164 5.70833 9.52498 5.025C10.2083 4.34167 11.0333 4 12 4C12.9666 4 13.7916 4.33333 14.475 5C15.1583 5.66667 15.5 6.48333 15.5 7.45C15.5 8.23333 15.2706 8.93733 14.812 9.562C14.354 10.1873 13.75 10.6167 13 10.85V11.75L21.6 18.2C21.9833 18.4833 22.1 18.854 21.95 19.312C21.8 19.7707 21.4833 20 21 20H2.99998ZM5.99998 18H18L12 13.5L5.99998 18Z" />
-    </Icon>
-  );
+type TIconAllFreeProps = {
+  size: IconSize.small | IconSize.regular;
+};
+
+function IconAllFree({ size }: TIconAllFreeProps) {
+  switch (size) {
+    case IconSize.small:
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 -960 960 960"
+          width="20"
+          height="20"
+          className="fill-current"
+        >
+          <path d="M132-192q-15.3 0-25.65-11Q96-214 96-229.111q0-8.889 3.867-16.569 3.866-7.681 11.6-12.199L444-491v-73q0-15.3 11.122-25.65Q466.244-600 482-600q20 0 33-14.442t13-34.5Q528-669 514-682.5T480-696q-20 0-34 14t-14 34h-72q0-50 35.202-85t85-35Q530-768 565-733.379t35 84.202Q600-609 577-576.5 554-544 516-533v42l332.533 234.043q7.734 4.536 11.6 12.246Q864-237 864-228q0 15.3-10.35 25.65Q843.3-192 828-192H132Zm114-72h468L480-428 246-264Z" />
+        </svg>
+      );
+
+    case IconSize.regular:
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 -960 960 960"
+          width="24"
+          height="24"
+          className="fill-current"
+        >
+          <path d="M120-160q-17 0-28.5-11.5T80-200q0-10 4-18.5T96-232l344-258v-70q0-17 12-28.5t29-11.5q25 0 42-18t17-43q0-25-17.5-42T480-720q-25 0-42.5 17.5T420-660h-80q0-58 41-99t99-41q58 0 99 40.5t41 98.5q0 47-27.5 84T520-526v36l344 258q8 5 12 13.5t4 18.5q0 17-11.5 28.5T840-160H120Zm120-80h480L480-420 240-240Z" />
+        </svg>
+      );
+  }
 }
 export default IconAllFree;
diff --git a/src/components/ui/icons/flash.tsx b/src/components/ui/icons/flash.tsx
@@ -11,11 +11,11 @@ function IconFlash({ size }: TIconFlashProps) {
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 -960 960 960"
-          width="24"
-          height="24"
+          width="20"
+          height="20"
           className="fill-current"
         >
-          <path d="m480-336 128-184H494l80-280H360v320h120v144ZM400-80v-320H280v-480h400l-80 280h160L400-80Zm80-400H360h120Z" />
+          <path d="m480-334 130-194H506l72-264H360v312h120v146ZM408-96v-312H288v-456h384l-72 264h144L408-96Zm72-384H360h120Z" />
         </svg>
       );
 
@@ -24,11 +24,11 @@ function IconFlash({ size }: TIconFlashProps) {
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 -960 960 960"
-          width="20"
-          height="20"
+          width="24"
+          height="24"
           className="fill-current"
         >
-          <path d="m480-334 130-194H506l72-264H360v312h120v146ZM408-96v-312H288v-456h384l-72 264h144L408-96Zm72-384H360h120Z" />
+          <path d="m480-336 128-184H494l80-280H360v320h120v144ZM400-80v-320H280v-480h400l-80 280h160L400-80Zm80-400H360h120Z" />
         </svg>
       );
   }