86 connect provider modal

src/components/ConnectProvider.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let close = () => {};
+  import Modal from '../components/Modal.svelte';
+  import DropDownMenu from './DropDownMenu.svelte';
+</script>
+
+<Modal {close}>
+  <div class="flex flex-col gap-7">
+    <h2 class="section-title-underlined">Connect Provider</h2>
+    <!-- Select a network dropdown goes here -->
+    <!-- Should default to current network -->
+    <DropDownMenu label="Select a Network" options={{ option1: 'option1' }} />
+
+    <!-- Select a control provider key goes here -->
+    <!-- Should default to current key -->
+    <DropDownMenu label="Select a Control Provider Key" options={{ option1: 'option1' }} />
+
+    <div class="flex justify-between align-bottom">
+      <button class="btn-primary" on:click={close}>Connect</button>
+      <button class="btn-no-fill" on:click={close}>Cancel</button>
+    </div>
+  </div>
+</Modal>

src/components/ConnectionStatus.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  export let connected = false;
+  import switchIcon from '$lib/assets/switch.png';
+  import ConnectProvider from './ConnectProvider.svelte';
+
+  $: showConnectProvider = false;
 </script>
 
 <div class="flex items-center gap-6">
@@ -13,6 +16,14 @@
 
   <!-- TODO: CHANGE ICON WHEN APPROVED -->
   <!-- TODO: ADD ONCLICK WHEN BUILDING SWITCH MODAL -->
-  <button on:click={() => {}}>SWITCH_ICON</button>
+  <button
+    on:click={() => (showConnectProvider = true)}
+    class="flex h-[40px] w-[40px] items-center justify-center rounded-md bg-green drop-shadow"
+    ><img src={switchIcon} alt="switch" class="w-[24px]" /></button
+  >
+
+  {#if showConnectProvider}
+    <ConnectProvider close={() => (showConnectProvider = false)} />
+  {/if}
   <!-- {/if} -->
 </div>

src/components/DropDownMenu.svelte

@@ -12,7 +12,15 @@
 
 <div>
   <label class="label mb-3.5 block" for={id}>{label}</label>
-  <select {id} bind:value={selected} {required} {disabled} on:change={onChange} on:select={onSelect}>
+  <select
+    {id}
+    bind:value={selected}
+    {required}
+    {disabled}
+    on:change={onChange}
+    on:select={onSelect}
+    class="cursor-pointer"
+  >
     {#if placeholder !== ''}
       <option class="text-disabled" value="" disabled selected>{placeholder}</option>
     {/if}

src/components/ListCard.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="content-block relative min-w-fit flex-grow">
-  <p class="section-title border-b border-divider pb-3">{title}</p>
+  <p class="section-title-underlined">{title}</p>
   {#if !connected}
     <div class="pt-3">Not connected</div>
   {:else if signingAddress === ''}

src/components/Modal.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let close = () => {};
+</script>
+
+<div
+  on:click={close}
+  on:keyup={close}
+  role="button"
+  tabindex="0"
+  class="fixed right-0 top-0 z-[100] flex h-[100vh] w-[calc(100vw-126px)] cursor-default items-center justify-center bg-overlay"
+>
+  <div
+    class="content-block w-modal cursor-default"
+    on:click|stopPropagation={() => {}}
+    on:keyup|stopPropagation={() => {}}
+    tabindex="0"
+    role="button"
+  >
+    <slot />
+  </div>
+</div>

src/components/ProviderActions.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import AddControlKey from '$components/AddControlKey.svelte';
+  import Modal from '$components/Modal.svelte';
   import CreateProvider from './CreateProvider.svelte';
   import RequestToBeProvider from './RequestToBeProvider.svelte';
   import Stake from './Stake.svelte';
@@ -63,7 +64,7 @@
 </script>
 
 {#if msaInfo?.isProvider}
-  <div class="flex w-500 justify-between">
+  <div class="flex w-[500px] justify-between">
     <button on:click|preventDefault={showAddControlKey} class="btn-primary mr-4 grow"> Add control key </button>
     <button on:click={showStake} class="btn-primary ml-4 grow"> Stake To Provider </button>
   </div>

src/style/app.css

@@ -32,6 +32,9 @@
   .section-title {
     @apply text-xl font-bold;
   }
+  .section-title-underlined {
+    @apply section-title border-b border-divider pb-3;
+  }
   .label {
     @apply text-base font-bold tracking-wide;
   }

tailwind.config.js

@@ -23,7 +23,7 @@ export default {
       overlay: 'rgba(57, 52, 52, 0.75)',
     },
     width: {
-      500: '500px',
+      modal: '420px',
     },
     extend: {
       borderRadius: {