fix(dashboard): maskes dashboard responsive

admin/components/Home/RequestForm.js

@@ -67,7 +67,11 @@ const RequestForm = ({
           onChange={setUrl}
         />
       </FormField>
-      <Box margin={{ top: "24px" }} direction="row" justify="between">
+      <RadioContainer
+        margin={{ top: "24px" }}
+        direction="row"
+        justify="between"
+      >
         <RadioBox status={typeValidation}>
           <RadioHead>{requestFieldType.label}</RadioHead>
           {requestFieldType.options.map(value => (
@@ -92,7 +96,7 @@ const RequestForm = ({
             />
           ))}
         </RadioBox>
-      </Box>
+      </RadioContainer>
     </Body>
   </Container>
 );
@@ -186,11 +190,10 @@ const Body = styled(Box)`
 
 const Header = styled(Heading)`
   display: block;
-  line-height: 100px;
   background-color: #f6f9fa;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  padding: 0 32px;
+  padding: 32px;
   font-size: 24px;
   font-weight: 600;
 
@@ -199,7 +202,19 @@ const Header = styled(Heading)`
   }
 `;
 
+const RadioContainer = styled(Box)`
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+`;
+
 const RadioBox = styled(Box)`
+  &:first-of-type {
+    @media (max-width: 600px) {
+      margin-bottom: 16px;
+    }
+  }
+
   label[class^="StyledRadioButton"] {
     margin-bottom: 8px;
   }
@@ -213,6 +228,10 @@ const RadioHead = styled(Paragraph)`
   width: 200px;
   margin-top: 0;
   margin-bottom: 12px;
+
+  @media (max-width: 600px) {
+    width: auto;
+  }
 `;
 
 const StyledTextInput = styled(TextInput)`

admin/components/Home/SiteIdJustRequested.js

@@ -61,11 +61,10 @@ const Container = styled(Box)`
 
 const Header = styled(Heading)`
   display: block;
-  line-height: 100px;
   background-color: #f6f9fa;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  padding: 0 32px;
+  padding: 32px;
   font-size: 24px;
   font-weight: 600;
 

admin/components/Home/SiteIdRequested.js

@@ -82,11 +82,10 @@ const Container = styled(Box)`
 
 const Header = styled(Heading)`
   display: block;
-  line-height: 100px;
   background-color: #f6f9fa;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  padding: 0 32px;
+  padding: 32px;
   font-size: 24px;
   font-weight: 600;
 

admin/components/Home/WithoutSiteId.js

@@ -139,7 +139,6 @@ const StyledParagraph = styled(Paragraph)`
 `;
 
 const Separator = styled.div`
-  width: 608px;
   height: 2px;
   opacity: 0.08;
   background-color: #1f38c5;
@@ -163,6 +162,11 @@ const Container = styled.div`
   display: flex;
   width: 100%;
   margin: 40px 0;
+
+  @media (max-width: 500px) {
+    flex-direction: column;
+    align-items: center;
+  }
 `;
 
 const InnerContainer = styled.div`
@@ -172,12 +176,22 @@ const InnerContainer = styled.div`
   &:first-of-type {
     width: 224px;
     margin-right: 32px;
+
+    @media (max-width: 500px) {
+      margin: 0;
+      margin-bottom: 32px;
+    }
   }
 `;
 
 const ViewDemoButton = styled(Button)`
   width: 140px;
   align-self: flex-end;
+
+  @media (max-width: 500px) {
+    align-self: center;
+    margin-top: 12px;
+  }
 `;
 
 const Footer = styled(Box)`

admin/models/__tests__/request.tests.js

@@ -246,15 +246,15 @@ describe("Admin › Models › Request", () => {
     expect(post).not.toHaveBeenCalled();
   });
 
-  test("`validate` should call `validations.validateAll()`", () => {
+  test("`validate` should call `validations.validate()`", () => {
     const store = Store.create();
-    const validateAll = jest.fn();
+    const validate = jest.fn();
 
     Object.defineProperty(store, "validations", {
-      value: { validateAll },
+      value: { validate },
     });
 
     store.validate();
-    expect(validateAll).toHaveBeenCalled();
+    expect(validate).toHaveBeenCalled();
   });
 });

admin/models/__tests__/settings.tests.js

@@ -50,7 +50,7 @@ describe("Admin › Models › Settings", () => {
       .create();
 
     Object.defineProperty(store, "validations", {
-      value: "validations",
+      value: { settings: "validations" },
     });
 
     expect(store.settings.validations).toBe("validations");
@@ -417,15 +417,15 @@ describe("Admin › Models › Settings", () => {
     expect(setPurgePurifierButtonStatus).toHaveBeenNthCalledWith(3, "idle");
   });
 
-  test("`validate()` should call `validations.validateAll()`", () => {
+  test("`validate()` should call `validations.validate()`", () => {
     const store = Store.create();
-    const validateAll = jest.fn();
+    const validate = jest.fn();
 
     Object.defineProperty(store, "validations", {
-      value: { validateAll },
+      value: { validate },
     });
 
     store.validate();
-    expect(validateAll).toHaveBeenCalled();
+    expect(validate).toHaveBeenCalled();
   });
 });

admin/models/request.js

@@ -78,6 +78,6 @@ export default types
       }
     },
     validate() {
-      return self.validations.validateAll();
+      return self.validations.validate();
     },
   }));

admin/models/settings.js

@@ -23,7 +23,7 @@ export default types
       return self.root.general;
     },
     get validations() {
-      return self.root.validations;
+      return self.root.validations.settings;
     },
   }))
   .actions(self => ({
@@ -66,8 +66,8 @@ export default types
     },
     setSiteIdRequested(value) {
       self.site_id_requested = value;
-      if (self.validations.site_id) self.validations.clear("site_id");
       self.saveSettings();
+      if (self.validations.site_id) self.validations.clear("site_id");
     },
     trimTextFields() {
       self.site_id = self.site_id.trim();
@@ -152,6 +152,6 @@ export default types
       }, 500);
     },
     validate() {
-      return self.validations.validateAll("settings");
+      return self.validations.validate();
     },
   }));