Add icons to notices

components/party/PartyHeader/index.module.scss

@@ -25,7 +25,6 @@
     display: flex;
     gap: $unit-2x;
     font-size: $font-regular;
-    justify-content: space-between;
     padding: $unit-4x;
     overflow: hidden;
 
@@ -37,6 +36,24 @@
 
     p {
       color: var(--notice-text);
+      flex-grow: 1;
+    }
+
+    .icon {
+      align-items: center;
+      background-color: var(--notice-button-bg);
+      border-radius: $full-corner;
+      display: flex;
+      justify-content: center;
+      height: $unit-6x;
+      width: $unit-6x;
+      flex-shrink: 0;
+
+      svg {
+        fill: var(--notice-text);
+        width: $unit-3x;
+        height: $unit-3x;
+      }
     }
 
     .buttons {

components/party/PartyHeader/index.tsx

@@ -19,16 +19,18 @@ import { formatTimeAgo } from '~utils/timeAgo'
 
 import RemixTeamAlert from '~components/dialogs/RemixTeamAlert'
 import RemixedToast from '~components/toasts/RemixedToast'
+import PartyVisibilityDialog from '~components/party/PartyVisibilityDialog'
+import UrlCopiedToast from '~components/toasts/UrlCopiedToast'
 
 import EditIcon from '~public/icons/Edit.svg'
 import RemixIcon from '~public/icons/Remix.svg'
 import SaveIcon from '~public/icons/Save.svg'
+import PrivateIcon from '~public/icons/Private.svg'
+import UnlistedIcon from '~public/icons/Unlisted.svg'
 
 import type { DetailsObject } from 'types'
 
 import styles from './index.module.scss'
-import PartyVisibilityDialog from '../PartyVisibilityDialog'
-import UrlCopiedToast from '~components/toasts/UrlCopiedToast'
 
 // Props
 interface Props {
@@ -331,6 +333,9 @@ const PartyHeader = (props: Props) => {
   // Render: Notice
   const unlistedNotice = (
     <div className={styles.notice}>
+      <div className={styles.icon}>
+        <UnlistedIcon />
+      </div>
       <p>{t('party.notices.unlisted')}</p>
       <div className={styles.buttons}>
         <Button
@@ -353,6 +358,9 @@ const PartyHeader = (props: Props) => {
 
   const privateNotice = (
     <div className={styles.notice}>
+      <div className={styles.icon}>
+        <PrivateIcon />
+      </div>
       <p>{t('party.notices.private')}</p>
       <div className={styles.buttons}>
         <Button

public/icons/Private.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.625 4.27273C3.625 2.46525 5.13604 1 7 1C8.86396 1 10.375 2.46525 10.375 4.27273V6.45455H10.4056C11.01 6.45455 11.5 6.94454 11.5 7.54897V11.9056C11.5 12.51 11.01 13 10.4056 13H3.59443C2.98999 13 2.5 12.51 2.5 11.9056V7.54897C2.5 6.94454 2.98999 6.45455 3.59443 6.45455H3.625V4.27273ZM5.3125 6.45455H8.6875V4.27273C8.6875 3.4678 8.30444 2.63636 7 2.63636C5.69557 2.63636 5.3125 3.45827 5.3125 4.27273V6.45455Z" />
+</svg>

public/icons/Public.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.04515 9.5C8.42586 9.5 9.54515 8.38071 9.54515 7C9.54515 5.61929 8.42586 4.5 7.04515 4.5C5.66444 4.5 4.54515 5.61929 4.54515 7C4.54515 8.38071 5.66444 9.5 7.04515 9.5ZM7.04515 8.5C7.87358 8.5 8.54515 7.82843 8.54515 7C8.54515 6.17157 7.87358 5.5 7.04515 5.5C6.21672 5.5 5.54515 6.17157 5.54515 7C5.54515 7.82843 6.21672 8.5 7.04515 8.5Z" />
+<path d="M13.2118 6.44776C10.1648 1.67656 4.08822 1.61674 0.814821 6.43618C0.611758 6.73515 0.607725 7.12607 0.803991 7.42954C3.9948 12.3633 10.0268 12.435 13.2119 7.41171C13.3986 7.11736 13.3994 6.7415 13.2118 6.44776Z" stroke-linejoin="round"/>
+</svg>

public/icons/Unlisted.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9358 6.38178C14.0712 6.14109 13.9858 5.83624 13.7451 5.70088C13.5044 5.56552 13.1996 5.6509 13.0642 5.89159C11.5427 8.59686 9.24574 9.87242 7.00066 9.86173C4.753 9.85102 2.45409 8.5506 0.934206 5.88876C0.79728 5.64896 0.49188 5.56556 0.252076 5.70248C0.012272 5.83941 -0.0711275 6.14481 0.0657981 6.38461C0.666775 7.43713 1.38868 8.31027 2.19043 8.99743C2.16108 9.0253 2.13467 9.0572 2.11204 9.09296L1.57636 9.93929C1.42867 10.1726 1.4981 10.4815 1.73143 10.6292C1.96476 10.7769 2.27364 10.7074 2.42132 10.4741L2.957 9.62777C2.96384 9.61698 2.9702 9.60602 2.97611 9.59493C3.33838 9.83773 3.71284 10.0462 4.09629 10.2199C4.08317 10.2433 4.07177 10.268 4.0623 10.2941L3.71972 11.2353C3.62528 11.4948 3.75907 11.7817 4.01856 11.8761C4.27805 11.9706 4.56497 11.8368 4.65942 11.5773L5.00199 10.6361C5.01037 10.613 5.01695 10.5898 5.02181 10.5665C5.50693 10.7115 6.00176 10.8035 6.5004 10.8416C6.50014 10.8483 6.5 10.855 6.5 10.8618V11.8634C6.5 12.1395 6.72386 12.3634 7 12.3634C7.27614 12.3634 7.5 12.1395 7.5 11.8634V10.8618L7.49975 10.8458C7.99944 10.8117 8.49534 10.7233 8.9815 10.5811C8.98592 10.5995 8.99142 10.6179 8.99805 10.6361L9.34063 11.5773C9.43507 11.8368 9.72199 11.9706 9.98148 11.8761C10.241 11.7817 10.3748 11.4948 10.2803 11.2353L9.93775 10.2941C9.93055 10.2743 9.92222 10.2552 9.91288 10.2369C10.2967 10.0644 10.6715 9.85639 11.0341 9.6131L11.043 9.62777L11.5787 10.4741C11.7264 10.7074 12.0353 10.7769 12.2686 10.6292C12.5019 10.4815 12.5714 10.1726 12.4237 9.93929L11.888 9.09296C11.8689 9.06272 11.847 9.03523 11.823 9.01061C12.6198 8.32285 13.3376 7.44546 13.9358 6.38178Z"/>
+</svg>