feat: added symbol when staking/unstaking (#220)

* feat: added symbol when staking/unstaking

* feat: added color for queue

src/app/proposals/StatusColumn.tsx

@@ -8,7 +8,7 @@ const StatusByProposalState = {
   Canceled: 'canceled',
   Defeated: 'rejected',
   Succeeded: 'success',
-  Queued: 'in-progress',
+  Queued: 'queue',
   Expired: 'rejected',
   Executed: 'success',
   undefined: null,

src/app/user/Stake/StakePreviewBalance.tsx

@@ -1,6 +1,7 @@
 import { StakePreviewBalanceProps } from '@/app/user/Stake/types'
 import { Span } from '@/components/Typography'
 import { toFixed } from '@/lib/utils'
+import Image from 'next/image'
 
 export const StakePreviewBalance = ({
   topLeftText,
@@ -26,7 +27,17 @@ export const StakePreviewBalance = ({
       <Span size="small" variant="light">
         Balance: {toFixed(balance)}
       </Span>
-      <div className="text-right mt-[8px]">{/* @TODO ICON {tokenSymbol} */}</div>
+      <div className="text-right mt-[8px] flex justify-end items-center">
+        {/* Maybe in the future make it dynamic - for now it's ok */}
+        <Image
+          src="/images/rif-logo.png"
+          alt="stRIF Logo"
+          width={0}
+          height={0}
+          className="mr-[8px] w-[16px] h-[16px]"
+        />
+        <strong>{tokenSymbol}</strong>
+      </div>
     </div>
   </div>
 )

src/components/Status/Status.tsx

@@ -22,6 +22,7 @@ export const Status: FC<Props> = ({ severity = 'success', label, ...rest }) => {
     'bg-st-info': severity === 'in-progress',
     'bg-st-error': severity === 'rejected',
     'bg-st-white': severity === 'canceled',
+    'bg-st-queue': severity === 'queue',
     'text-black': severity === 'canceled',
   })
 

src/components/Status/types.ts

@@ -1 +1 @@
-export type StatusSeverity = 'success' | 'rejected' | 'in-progress' | 'canceled'
+export type StatusSeverity = 'success' | 'rejected' | 'in-progress' | 'canceled' | 'queue'

src/theme/default.css

@@ -38,6 +38,7 @@ html[data-theme='default'] {
   --st-info: rgba(255, 153, 0, 1);
   --st-error: rgba(242, 72, 34, 1);
   --st-white: rgba(255, 255, 255, 1); /* This white is used in progress bar */
+  --st-queue: rgba(102, 94, 246, 1);
 
   /* Font */
   --font-open-sans: 'Open Sans';

tailwind.config.ts

@@ -25,6 +25,7 @@ const config: Config = {
         'st-info': 'var(--st-info)',
         'st-error': 'var(--st-error)',
         'st-white': 'var(--st-white)',
+        'st-queue': 'var(--st-queue)',
         'text-light': 'var(--text-light)',
         'disabled-primary': 'var(--disabled-primary)',
         'disabled-secondary': 'var(--disabled-secondary)',