feat: dark model (modals)

packages/bruno-app/src/components/Modal/StyledWrapper.js

@@ -66,8 +66,8 @@ const Wrapper = styled.div`
     justify-content: space-between;
     align-items: center;
     text-transform: uppercase;
-    color: rgb(86 86 86);
+    color: ${(props) => props.theme.modal.title.color};
-    background-color: #f1f1f1;
+    background-color: ${(props) => props.theme.modal.title.bg};
     font-size: 0.75rem;
     padding: 12px;
     font-weight: 600;
@@ -77,7 +77,7 @@ const Wrapper = styled.div`
     .close {
       font-size: 1.3rem;
       line-height: 1;
-      color: #000;
+      color: ${(props) => props.theme.modal.iconColor};
       text-shadow: 0 1px 0 #fff;
       opacity: 0.5;
       margin-top: -2px;
@@ -90,7 +90,26 @@ const Wrapper = styled.div`
 
   .bruno-modal-content {
     flex-grow: 1;
-    background-color: #fff;
+    background-color: ${(props) => props.theme.modal.body.bg};
+
+    .textbox {
+      line-height: 1.42857143;
+      border: 1px solid #ccc;
+      padding: 0.45rem;
+      box-shadow: none;
+      border-radius: 0px;
+      outline: none;
+      box-shadow: none;
+      transition: border-color ease-in-out .1s;
+      border-radius: 3px;
+      background-color: ${(props) => props.theme.modal.input.bg};
+      border: 1px solid ${(props) => props.theme.modal.input.border};
+
+      &:focus {
+        border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+        outline: none !important;
+      }
+    }
   }
 
   .bruno-modal-backdrop {
@@ -117,7 +136,7 @@ const Wrapper = styled.div`
   }
 
   .bruno-modal-footer {
-    background-color: white;
+    background-color: ${(props) => props.theme.modal.body.bg};
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
   }

packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.method-selector-container {
-    border: solid 1px var(--color-layout-border);
+    border: solid 1px ${(props) => props.theme.modal.input.border};
     border-right: none;
-    background-color: var(--color-sidebar-background);
+    background-color: ${(props) => props.theme.modal.input.bg};
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 
@@ -15,15 +15,17 @@ const StyledWrapper = styled.div`
 
   div.method-selector-container,
   div.input-container {
+    background-color: ${(props) => props.theme.modal.input.bg};
     height: 2.3rem;
   }
 
   div.input-container {
-    border: solid 1px var(--color-layout-border);
+    border: solid 1px ${(props) => props.theme.modal.input.border};
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 
     input {
+      background-color: ${(props) => props.theme.modal.input.bg};
       outline: none;
       box-shadow: none;
 

packages/bruno-app/src/globalStyles.js

@@ -6,24 +6,70 @@ const GlobalStyle = createGlobalStyle`
     border-right: solid 1px var(--color-codemirror-border);
   }
 
-  .bruno-form {
+  .btn {
-    .textbox {
+    text-align: center;
-      line-height: 1.42857143;
+    white-space: nowrap;
-      background-color: #fff;
+    outline: none;
-      background-image: none;
+    box-shadow: none;
-      border: 1px solid #ccc;
+    border-radius: 3px;
-      padding: 0.45rem;
+  }
-      box-shadow: none;
+
-      border-radius: 0px;
+  .btn-sm {
+    padding: .215rem .6rem .215rem .6rem;
+  }
+
+  .btn-md {
+    padding: .4rem 1.1rem;
+    line-height: 1.47;
+  }
+
+  .btn-default {
+    &:active,
+    &:hover,
+    &:focus {
       outline: none;
       box-shadow: none;
-      transition: border-color ease-in-out .1s;
+    }
-      border-radius: 3px;
+  }
 
-      &:focus {
+  .btn-close {
-        border: solid 1px #8b8b8b !important;
+    color: ${(props) => props.theme.button.close.color};
-        outline: none !important;
+    background: ${(props) => props.theme.button.close.bg};
-      }
+    border: solid 1px ${(props) => props.theme.button.close.border};;
+
+    &:hover,
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border: solid 1px #696969;
+    }
+  }
+
+  .btn-secondary {
+    color: ${(props) => props.theme.button.secondary.color};
+    background: ${(props) => props.theme.button.secondary.bg};
+    border: solid 1px ${(props) => props.theme.button.secondary.border};
+
+    .btn-icon {
+      color: #3f3f3f;
+    }
+
+    &:hover,
+    &:focus {
+      border-color: ${(props) => props.theme.button.secondary.hoverBorder};
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      color: #545454;
+      background: #efefef;
+      border: solid 1px rgb(234, 234, 234);
+      cursor: not-allowed;
+    }
+
+    &:disabled.btn-icon {
+      color: #545454;
     }
   }
 

packages/bruno-app/src/styles/_buttons.scss

@@ -1,89 +1 @@
-.btn {
-  text-align: center;
-  white-space: nowrap;
-  outline: none;
-  box-shadow: none;
-  border-radius: 3px;
-}
 
-.btn-sm {
-  padding: .215rem .6rem .215rem .6rem;
-}
-
-.btn-md {
-  padding: .4rem 1.1rem;
-  line-height: 1.47;
-}
-
-.btn-default {
-  &:active,
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-}
-
-.btn-close {
-  color: #212529;
-  background: white;
-  border: solid 1px white;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-    border: solid 1px #696969;
-  }
-}
-
-.btn-secondary {
-  color: #212529;
-  background: #e2e6ea;
-  border: solid 1px #dae0e5;
-
-  .btn-icon {
-    color: #3f3f3f;
-  }
-
-  &:hover,
-  &:focus {
-    border-color: #696969;
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:disabled {
-    color: #545454;
-    background: #efefef;
-    border: solid 1px rgb(234, 234, 234);
-    cursor: not-allowed;
-  }
-
-  &:disabled.btn-icon {
-    color: #545454;
-  }
-
-  &.btn-gradient {
-    background: linear-gradient(#fff, #e0e0e0);
-    border: solid 1px rgb(191, 191, 191);
-
-    &:hover {
-      border: solid 1px rgb(179, 179, 179);
-      background: linear-gradient(#f6f6f6, #e0e0e0);
-    }
-
-    &:focus,
-    &:active {
-      border: solid 1px rgb(129, 129, 129);
-      outline: none;
-      box-shadow: 0 8px 6px -11px black;
-    }
-
-    &:disabled {
-      color: #545454;
-      background: linear-gradient(#fff, #ececec);
-      border: solid 1px rgb(234, 234, 234);
-    }
-  }
-}

packages/bruno-app/src/themes/dark.js

@@ -66,6 +66,69 @@ const darkTheme = {
     }
   },
 
+  modal: {
+    title: {
+      color: '#ccc',
+      bg: 'rgb(48, 48, 49)',
+      iconColor: '#ccc'
+    },
+    body: {
+      color: '#ccc',
+      bg: 'rgb(48, 48, 49)',
+    },
+    input : {
+      bg: 'rgb(65, 65, 65)',
+      border: 'rgb(65, 65, 65)',
+      focusBorder: 'rgb(65, 65, 65)'
+    }
+  },
+
+  button: {
+    secondary: {
+      color: 'rgb(204, 204, 204)',
+      bg: '#0F395E',
+      border: '#0F395E',
+      hoverBorder: '#696969'
+    },
+    close: {
+      color: '#ccc',
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    }
+  },
+
+  tabs: {
+    color: '',
+    bg: '',
+    borromBorder: '',
+    active: {
+      color: '',
+      bg: '',
+      borromBorder: ''
+    }
+  },
+
+
+  requestTabs: {
+    color: '',
+    bg: '',
+    borromBorder: '',
+    active: {
+      color: '',
+      bg: '',
+      borromBorder: ''
+    }
+  },
+
+  codemirror: {
+
+  },
+
+  table: {
+    border: '',
+  },
+
   'primary-text': '#ffffff',
   'secondary-text': '#929292',
   'sidebar-collection-item-active-background': '#e1e1e1',

packages/bruno-app/src/themes/light.js

@@ -39,7 +39,7 @@ const lightTheme = {
   dropdown: {
     color: "rgb(48 48 48)",
     iconColor: "rgb(75, 85, 99)",
-    bg: 'rgb(48, 48, 49)',
+    bg: '#fff',
     hoverBg: '#e9e9e9',
     shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
   },
@@ -66,6 +66,68 @@ const lightTheme = {
     }
   },
 
+  modal: {
+    title: {
+      color: 'rgb(86 86 86)',
+      bg: '#f1f1f1',
+      iconColor: 'black'
+    },
+    body: {
+      color: '#ccc',
+      bg: 'white',
+    },
+    input : {
+      bg: 'white',
+      border: '#ccc',
+      focusBorder: '#8b8b8b'
+    }
+  },
+
+  button: {
+    secondary: {
+      color: '#212529',
+      bg: '#e2e6ea',
+      border: '#dae0e5',
+      hoverBorder: '#696969'
+    },
+    close: {
+      color: '212529',
+      bg: 'white',
+      border: 'white',
+      hoverBorder: ''
+    }
+  },
+
+  tabs: {
+    color: '',
+    bg: '',
+    borromBorder: '',
+    active: {
+      color: '',
+      bg: '',
+      borromBorder: ''
+    }
+  },
+
+  requestTabs: {
+    color: '',
+    bg: '',
+    borromBorder: '',
+    active: {
+      color: '',
+      bg: '',
+      borromBorder: ''
+    }
+  },
+
+  codemirror: {
+
+  },
+
+  table: {
+    border: '',
+  },
+  
   'primary-text': 'rgb(52 52 52)',
   'secondary-text': '#929292',
   'sidebar-collection-item-active-background': '#e1e1e1',