Whitelist styles

src/pages/Popup/WhitelistPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Box, Label, Input, Flex, Button } from 'theme-ui'
+import { Box, Label, Input, Flex, Button, Close } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
@@ -42,7 +42,7 @@ const WhitelistPage = ({ tab }: any) => {
         display: tab === 'whitelist' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Whitelist</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>Whitelist</Box>
       <Flex>
         <Input name="url" value={currentUrl} spellCheck="false" />
         <Button
@@ -55,13 +55,38 @@ const WhitelistPage = ({ tab }: any) => {
           Add
         </Button>
       </Flex>
-      {whitelist.map((element, index) => {
+      {whitelist.length ? (
-        return (
+        <Box
-          <div key={index}>
+          sx={{
-            <h2>{element}</h2>
+            border: '1px solid ',
-          </div>
+            borderRadius: '4px',
-        )
+            borderColor: 'grey',
-      })}
+            p: '2px 8px',
+            my: '8px',
+          }}
+        >
+          {whitelist.map((element, index) => {
+            return (
+              <Flex
+                key={index}
+                sx={{
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  my: '8px',
+                }}
+              >
+                {element}{' '}
+                <Close
+                  sx={{ width: '24px', height: '24px' }}
+                  onClick={() =>
+                    setWhitelist(whitelist.filter((item) => item !== element))
+                  }
+                />
+              </Flex>
+            )
+          })}
+        </Box>
+      ) : null}
     </Box>
   )
 }

src/theme.ts

@@ -10,7 +10,7 @@ export const theme: Theme = {
     redDark: '#e2525a',
     green: '#26de81',
     greenDark: '#22c774',
-    grey: '#BCC2C9',
+    grey: '#989898',
   },
   styles: {
     root: {
@@ -27,7 +27,7 @@ export const theme: Theme = {
     input: {
       p: '2px 8px',
       mb: '8px',
-      borderColor: 'gray',
+      borderColor: 'grey',
       '&:focus': {
         borderColor: 'primaryDark',
         outline: 'none',
@@ -35,7 +35,7 @@ export const theme: Theme = {
     },
     select: {
       p: '2px 8px',
-      borderColor: 'gray',
+      borderColor: 'grey',
       '&:focus': {
         borderColor: 'primaryDark',
         outline: 'none',
@@ -66,5 +66,11 @@ export const theme: Theme = {
       //   bg: 'primaryDark',
       // },
     },
+    close: {
+      cursor: 'pointer',
+      color: 'text',
+      p: 0,
+      m: 0,
+    },
   },
 }