refactor(webapp): change svg ico color style

binbat · Jan 10, 2024 · 2470135 · 2470135
1 parent ddd4ffa
commit 2470135
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 21 deletions.
diff --git a/vite.config.ts b/vite.config.ts
@@ -22,7 +22,7 @@ export default defineConfig({
     UnoCSS({
       shortcuts: [
         { logo: 'i-logos-react w-6em h-6em transform transition-800 hover:rotate-180' },
-        { 'btn-primary': "py-2 px-4 bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 disabled:pointer-events-none disabled:bg-slate-300" },
+        { 'btn-primary': "py-2 px-4 bg-blue-500 duration-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 disabled:pointer-events-none disabled:bg-slate-300" },
       ],
       presets: [
         presetUno(),

diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
@@ -193,7 +193,7 @@ export default function DeviceBar() {
     <div className='flex flex-row flex-wrap justify-around p-xs'>
       <center className='flex flex-row flex-wrap justify-around'>
         <section className='m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-          <button className='rounded-md w-8 h-8' onClick={() => toggleEnableAudio()}>
+          <button className='text-rose-400 rounded-md w-8 h-8' onClick={() => toggleEnableAudio()}>
             <center>
               {loadingAudio
                 ? <Loading />
@@ -228,7 +228,7 @@ export default function DeviceBar() {
         </section>
 
         <section className='m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-          <button className='rounded-md w-8 h-8' onClick={() => toggleEnableVideo()}>
+          <button className='text-rose-400 rounded-md w-8 h-8' onClick={() => toggleEnableVideo()}>
             <center>
               {loadingVideo
                 ? <Loading />
@@ -264,7 +264,7 @@ export default function DeviceBar() {
       </center>
       <center>
         <section className='m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-          <button className='rounded-md w-8 h-8' onClick={() => toggleEnableScreen()}>
+          <button className='text-rose-400 rounded-md w-8 h-8' onClick={() => toggleEnableScreen()}>
             <center>
               {loadingScreen
                 ? <Loading />

diff --git a/webapp/components/layout.tsx b/webapp/components/layout.tsx
@@ -82,22 +82,23 @@ export default function Layout(props: { meetingId: string }) {
       <center>
         <Member />
         <div className='flex justify-evenly bg-gray-800/80'>
-          <section className='m-sm p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-            <button className='rounded-md' onClick={() => copy(location.href) && setCopyStatus(true)}>
-              <code className='mx-xs'>{props.meetingId}</code>
-            </button>
-            {copyStatus
-              ? <center className='m-1.5 bg-indigo-200 rounded-md'>
+          <section className='m-sm p-0.5 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
+            <button className='flex flex-row text-rose-400 rounded-md p-2' onClick={() => {
+              copy(location.href)
+              setCopyStatus(true)
+              setTimeout(() => setCopyStatus(false), 3000)
+            }}>
+              <code className='mx-sm my-1px'>{props.meetingId}</code>
+              <center className='text-rose-400 rounded-md' style={{ visibility: copyStatus ? 'visible' : 'hidden' }} >
                 <SvgDone />
               </center>
-              : null
-            }
+            </button>
           </section>
 
           <DeviceBar />
 
-          <section className='m-sm p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
-            <button className='rounded-md w-12 h-9' onClick={() => callEnd()}>
+          <section className='flex flex-col justify-center'>
+            <button className='text-white bg-rose-600 hover:bg-rose-700 duration-1000 shadow-xl rounded-3xl w-18 h-10' onClick={() => callEnd()}>
               <center>
                 <SvgEnd />
               </center>

diff --git a/webapp/components/svg/audio.tsx b/webapp/components/svg/audio.tsx
@@ -1,8 +1,8 @@
 export default function SvgAudio() {
   return (
     <svg focusable="false" width="24" height="24" viewBox="0 0 24 24">
-      <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"></path>
-      <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"></path>
+      <path fill="currentColor" d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"></path>
+      <path fill="currentColor" d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"></path>
     </svg>
   )
 }
diff --git a/webapp/components/svg/done.tsx b/webapp/components/svg/done.tsx
@@ -1,7 +1,7 @@
 export default function SvgDone() {
   return (
     <svg height="24" viewBox="0 -960 960 960" width="24">
-      <path d="m381-240 424-424-57-56-368 367-169-170-57 57 227 226Zm0 113L42-466l169-170 170 170 366-367 172 168-538 538Z" />
+      <path fill="currentColor" d="m381-240 424-424-57-56-368 367-169-170-57 57 227 226Zm0 113L42-466l169-170 170 170 366-367 172 168-538 538Z" />
     </svg>
   )
 }
diff --git a/webapp/components/svg/end.tsx b/webapp/components/svg/end.tsx
@@ -1,7 +1,7 @@
 export default function SvgEnd() {
   return (
     <svg height="24" viewBox="0 -960 960 960" width="24">
-      <path d="m136-304-92-90q-12-12-12-28t12-28q88-95 203-142.5T480-640q118 0 232.5 47.5T916-450q12 12 12 28t-12 28l-92 90q-11 11-25.5 12t-26.5-8l-116-88q-8-6-12-14t-4-18v-114q-38-12-78-19t-82-7q-42 0-82 7t-78 19v114q0 10-4 18t-12 14l-116 88q-12 9-26.5 8T136-304Zm104-198q-29 15-56 34.5T128-424l40 40 72-56v-62Zm480 2v60l72 56 40-38q-29-26-56-45t-56-33Zm-480-2Zm480 2Z" />
+      <path fill="currentColor" d="m136-304-92-90q-12-12-12-28t12-28q88-95 203-142.5T480-640q118 0 232.5 47.5T916-450q12 12 12 28t-12 28l-92 90q-11 11-25.5 12t-26.5-8l-116-88q-8-6-12-14t-4-18v-114q-38-12-78-19t-82-7q-42 0-82 7t-78 19v114q0 10-4 18t-12 14l-116 88q-12 9-26.5 8T136-304Zm104-198q-29 15-56 34.5T128-424l40 40 72-56v-62Zm480 2v60l72 56 40-38q-29-26-56-45t-56-33Zm-480-2Zm480 2Z" />
     </svg>
   )
 }
diff --git a/webapp/components/svg/present.tsx b/webapp/components/svg/present.tsx
@@ -1,15 +1,15 @@
 function SvgPresentToAll() {
   return (
     <svg height="24" viewBox="0 -960 960 960" width="24">
-      <path d="M440-320h80v-166l64 63 57-57-161-160-160 160 57 56 63-63v167ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z" />
+      <path fill="currentColor" d="M440-320h80v-166l64 63 57-57-161-160-160 160 57 56 63-63v167ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z" />
     </svg>
   )
 }
 
 function SvgPresentCancel() {
   return (
     <svg height="24" viewBox="0 -960 960 960" width="24">
-      <path d="m376-320 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z" />
+      <path fill="currentColor" d="m376-320 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z" />
     </svg>
   )
 }

diff --git a/webapp/components/svg/video.tsx b/webapp/components/svg/video.tsx
@@ -1,7 +1,7 @@
 export default function SvgVideo() {
   return (
     <svg focusable="false" width="24" height="24" viewBox="0 0 24 24">
-      <path d="M18 10.48V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4.48l4 3.98v-11l-4 3.98zm-2-.79V18H4V6h12v3.69z"></path>
+      <path fill="currentColor" d="M18 10.48V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4.48l4 3.98v-11l-4 3.98zm-2-.79V18H4V6h12v3.69z"></path>
     </svg>
   )
 }