Merge pull request #7 from recallwei/v1.1.3

Release v1.1.3

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## v1.1
 
+## v1.1.3
+
+- Update the icon of the start button.
+
 ## v1.1.2
 
 - Fix the display of the link error.

src/components/Button/index.tsx

@@ -13,6 +13,7 @@ export default function Button({
   type,
   size = "md",
   color = "default",
+  spanClassName,
 }: ButtonProps): JSX.Element {
   return (
     <button
@@ -38,7 +39,8 @@ export default function Button({
           "flex items-center justify-center gap-1 whitespace-nowrap",
           size === "sm" && "gap-0.5",
           size === "md" && "gap-0.5",
-          size === "lg" && "gap-1"
+          size === "lg" && "gap-1",
+          spanClassName
         )}
       >
         {icon}

src/components/Svg/Door.tsx

@@ -0,0 +1,29 @@
+import { type SvgPropsType } from ".";
+import clsx from "clsx";
+
+export default function Door({
+  width = "24",
+  height = "24",
+  className,
+  onClick,
+}: SvgPropsType): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      className={clsx("fill-black", className)}
+      onClick={onClick}
+    >
+      <g>
+        <path d="M0,0h24v24H0V0z" fill="none" />
+      </g>
+      <g>
+        <path d="M19,19V5c0-1.1-0.9-2-2-2H7C5.9,3,5,3.9,5,5v14H3v2h18v-2H19z M17,19H7V5h10V19z M13,11h2v2h-2V11z" />
+      </g>
+    </svg>
+  );
+}
+
+// Google Material Icons - Door Front

src/components/Svg/Touch.tsx

@@ -0,0 +1,31 @@
+import { type SvgPropsType } from ".";
+import clsx from "clsx";
+
+export default function Touch({
+  width = "24",
+  height = "24",
+  className,
+  onClick,
+}: SvgPropsType): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      className={clsx("fill-black", className)}
+      onClick={onClick}
+    >
+      <g>
+        <rect fill="none" height="24" width="24" />
+      </g>
+      <g>
+        <g>
+          <path d="M18.19,12.44l-3.24-1.62c1.29-1,2.12-2.56,2.12-4.32c0-3.03-2.47-5.5-5.5-5.5s-5.5,2.47-5.5,5.5c0,2.13,1.22,3.98,3,4.89 v3.26c-2.15-0.46-2.02-0.44-2.26-0.44c-0.53,0-1.03,0.21-1.41,0.59L4,16.22l5.09,5.09C9.52,21.75,10.12,22,10.74,22h6.3 c0.98,0,1.81-0.7,1.97-1.67l0.8-4.71C20.03,14.32,19.38,13.04,18.19,12.44z M17.84,15.29L17.04,20h-6.3 c-0.09,0-0.17-0.04-0.24-0.1l-3.68-3.68l4.25,0.89V6.5c0-0.28,0.22-0.5,0.5-0.5c0.28,0,0.5,0.22,0.5,0.5v6h1.76l3.46,1.73 C17.69,14.43,17.91,14.86,17.84,15.29z M8.07,6.5c0-1.93,1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5c0,0.95-0.38,1.81-1,2.44V6.5 c0-1.38-1.12-2.5-2.5-2.5c-1.38,0-2.5,1.12-2.5,2.5v2.44C8.45,8.31,8.07,7.45,8.07,6.5z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+// Google Material Icons - Touch App

src/components/Svg/index.ts

@@ -51,6 +51,8 @@ import AddTask from "./AddTask";
 import AddLink from "./AddLink";
 import Link from "./Link";
 import LinkOff from "./LinkOff";
+import Touch from "./Touch";
+import Door from "./Door";
 
 export const Icon = {
   Archive,
@@ -99,4 +101,6 @@ export const Icon = {
   AddLink,
   Link,
   LinkOff,
+  Touch,
+  Door,
 };

src/interfaces/components.ts

@@ -47,6 +47,7 @@ interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
   block: boolean;
   size: "sm" | "md" | "lg";
   color: "default" | "danger";
+  spanClassName: string;
 }
 
 type ButtonProps = Partial<ButtonProperties> & CustomComponentProps;

src/pages/Home/index.tsx

@@ -9,7 +9,6 @@ import { APPLICATION_NAME } from "@constants";
 import { Icon, Loading, Button } from "@components";
 import GitHubIcon from "./GitHubIcon";
 
-import taskward from "@assets/img/taskward.png";
 import homeBackground from "@assets/background/home.jpg";
 import { validateTokenExpireTime } from "@utils";
 
@@ -90,8 +89,8 @@ export default function Home(): JSX.Element {
                 }}
                 icon={
                   <Icon.Login
-                    width="16"
-                    height="16"
+                    width="18"
+                    height="18"
                     className="flex-shrink-0 fill-white"
                   />
                 }
@@ -103,12 +102,12 @@ export default function Home(): JSX.Element {
               onClick={() => {
                 handleClickStartBtn();
               }}
+              spanClassName="gap-[1.5px]"
               icon={
-                <img
-                  src={taskward}
-                  width="16"
-                  height="16"
-                  className="flex-shrink-0"
+                <Icon.Touch
+                  width="18"
+                  height="18"
+                  className="flex-shrink-0 fill-white"
                 />
               }
             />

src/pages/Icons/index.tsx

@@ -15,6 +15,7 @@ export default function Icons(): JSX.Element {
       <Icon.Delete /> Delete
       <Icon.DeleteForever /> DeleteForever
       <Icon.DeleteTime /> DeleteTime
+      <Icon.Door /> Door
       <Icon.Edit /> Edit
       <Icon.ExpandCircle /> ExpandCircle
       <Icon.Face /> Face
@@ -42,6 +43,7 @@ export default function Icons(): JSX.Element {
       <Icon.Sun /> Sun
       <Icon.Sync /> Sync
       <Icon.Task /> Task
+      <Icon.Touch /> Touch
       <Icon.Trash /> Trash
       <Icon.Unarchive /> Unarchive
       <Icon.Unlock /> Unlock