From 288422a79ce76e3cde56b3273aa7822f5b0a3917 Mon Sep 17 00:00:00 2001
From: Maja Komel <maja.komel@gmail.com>
Date: Wed, 10 Aug 2022 21:26:24 +0200
Subject: [PATCH] Styling changes to make sections more pronounced

---
 components/submit/Changes.tsx     | 50 ++++++++++++++++++-------------
 components/submit/SubmitButton.js |  2 +-
 components/submit/UrlList.js      |  4 +--
 pages/[cc].js                     |  9 ++++--
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/components/submit/Changes.tsx b/components/submit/Changes.tsx
index d8e570e..128d6cb 100644
--- a/components/submit/Changes.tsx
+++ b/components/submit/Changes.tsx
@@ -106,27 +106,35 @@ const Changes = () => {
   }
 
   return (
-    <Flex
-      flexDirection='column'
-      mt={2}
-      pb={4}
-    >
-      {data && !error && (
-        <>
-          <Box fontWeight='bold'>
-            <Row change={headerRow} />
-          </Box>
-          <Box>
-            {Object.keys(data.changes)
-              .sort((cc1, cc2) => (cc2 === 'global' ? 1 : -1))
-              .map((cc) => (
-                <ChangeSet key={cc} cc={cc} changes={data.changes[cc]} />
-              ))}
-          </Box>
-          <SubmitButton />
-        </>
-      )}
-    </Flex>
+    <>
+      <Heading h={4} mb={3}>Proposed Changes</Heading>
+      <Flex
+        flexDirection='column'
+        mt={2}
+        px={3}
+        py={2}
+        mb={4}
+        sx={{
+          border: '1px solid black',
+        }}
+      >
+        {data && !error && (
+          <>
+            <Box fontWeight='bold'>
+              <Row change={headerRow} />
+            </Box>
+            <Box>
+              {Object.keys(data.changes)
+                .sort((cc1, cc2) => (cc2 === 'global' ? 1 : -1))
+                .map((cc) => (
+                  <ChangeSet key={cc} cc={cc} changes={data.changes[cc]} />
+                ))}
+            </Box>
+            <SubmitButton />
+          </>
+        )}
+      </Flex>
+    </>
   )
 }
 
diff --git a/components/submit/SubmitButton.js b/components/submit/SubmitButton.js
index bad055f..c8fb32d 100644
--- a/components/submit/SubmitButton.js
+++ b/components/submit/SubmitButton.js
@@ -29,7 +29,7 @@ const SubmitButton = () => {
   }, [mutate, notify])
 
   return (
-    <Flex flexDirection={['column']} py={3} mb={4}>
+    <Flex flexDirection={['column']} py={2} >
       <Flex my={[2, 2]}>
         {isClean && (
           <Box>
diff --git a/components/submit/UrlList.js b/components/submit/UrlList.js
index fd0cbb2..8aaf9b2 100644
--- a/components/submit/UrlList.js
+++ b/components/submit/UrlList.js
@@ -207,7 +207,7 @@ const UrlList = ({ cc }) => {
     <Flex flexDirection='column' my={2}>
       {data && !error && (
         <>
-          <Box py={2}>
+          <Box py={2} mb={3}>
               <EditForm
                 layout='row'
                 onSubmit={handleSubmit}
@@ -215,7 +215,7 @@ const UrlList = ({ cc }) => {
                 error={addFormError}
               />
           </Box>
-
+          <Heading h={4} mb={2}>Test List</Heading>
           <Table
             data={data}
             onEdit={onEdit}
diff --git a/pages/[cc].js b/pages/[cc].js
index b0af8c9..361b415 100644
--- a/pages/[cc].js
+++ b/pages/[cc].js
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
-import { Heading } from 'ooni-components'
+import { Heading, Box } from 'ooni-components'
 
 import Layout from '../components/Layout'
 import CountryList from '../components/submit/CountryList'
@@ -31,9 +31,12 @@ export default function Submit () {
     <Layout title='Url Submission'>
       <Notification />
       <PageContextProvider countryCode={countryCode}>
+        <Heading h={2} mt={3} mb={4}>Test List Editor</Heading>
         <Changes />
-        <Heading h={1}>Test List</Heading>
-        <CountryList defaultValue={countryCode} onChange={onCountryChange} />
+        <Heading h={4} mb={3}>Country</Heading>
+        <Box mb={4}>
+          <CountryList defaultValue={countryCode} onChange={onCountryChange} />
+        </Box>
         {countryCode && <UrlList cc={countryCode} />}
       </PageContextProvider>
     </Layout>