[WIP] Fixes #500 #498 Uniform Button styles

package.json

@@ -40,7 +40,7 @@
   "proxy": "http://localhost:5000",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && ./build.sh",
+    "build": "CI=false && react-scripts build && ./build.sh",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/common/Button.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+const Btn = (props) => {
+    let styles = {
+        fontFamily: 'Inter',
+        boxShadow: 'none',
+        borderRadius: '0.25rem',
+        fontStyle: 'normal'
+    };
+    if (props.buttonType === 'outline'){
+        styles.backgroundColor = '#ffffff';
+        styles.color = '#1A73E8';
+    } else {
+        styles.backgroundColor = '#1A73E8';
+        styles.color = '#ffffff';
+    }
+    const Props = {...props};
+    Props.style = styles;
+    return(
+        <Button {...Props}>
+            {props.children}
+        </Button>
+    )
+}
+
+export default Btn;

src/css/components/_modals.scss

@@ -34,7 +34,7 @@
         width: 6vw;
         height: 5vh;
         background: rgb(250, 251, 252);
-        border-radius: 100px;
+        font-family: Inter;
         color: #1A73E8;
         padding: 0.3em;
         margin-left: 1em;
@@ -257,8 +257,6 @@
       .modal__remove__followButton {
         border: 1px solid #eb5757;
         box-sizing: border-box;
-        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
-        border-radius: 34px;
         background: transparent;
         width: 83px;
         height: 4.5vh;
@@ -309,9 +307,8 @@
           display: flex;
           .invite__btn {
             margin-left: 3px;
+            font-family: Inter;
             background: #1a73e8;
-            box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1);
-            border-radius: 43.0667px;
             width: 83px;
             height: 4.5vh;
             padding: 0px;
@@ -322,9 +319,8 @@
           flex-wrap: wrap;
           .invite__btn {
             margin-right: 10px;
+            font-family: Inter;
             background: #1a73e8;
-            box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
-            border-radius: 20px;
             width: 83px;
             height: 4.5vh;
             padding: 0px;
@@ -385,4 +381,8 @@
       }
     }
   }
-}
+  .vertical-align-row {
+    display: flex;
+    align-items: center;
+  }
+}

src/user/dashboard/news-feed/news-feed.js

@@ -15,6 +15,7 @@ import {
 } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { Button } from "react-bootstrap";
+import Btn from "../../../common/Button";
 import AddEventModal from "./popups/AddEventModal";
 import AddProjectModal from "./popups/AddProjectModal";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
@@ -393,7 +394,7 @@ function NewsFeed(props) {
                 color="primary"
                 aria-label="contained primary button group"
               >
-                <Button
+                <Btn
                   variant="primary"
                   onClick={() => {
                     handleShow("event");
@@ -413,8 +414,8 @@ function NewsFeed(props) {
                     />
                   </svg>
                   <span className="optionbtn-text">Event</span>
-                </Button>
-                <Button
+                </Btn>
+                <Btn
                   variant="primary"
                   className="optionbtn"
                   onClick={() => {
@@ -434,7 +435,7 @@ function NewsFeed(props) {
                     />
                   </svg>
                   <span className="optionbtn-text">Project</span>
-                </Button>
+                </Btn>
               </ButtonGroup>
             </div>
           </div>

src/user/dashboard/news-feed/news-feed.scss

@@ -4,6 +4,7 @@
     height: 50px;
     .article {
       display: flex;
+      align-items: center;
       form {
         flex: 1;
         border: none;
@@ -392,16 +393,11 @@
         }
 
         .optionbtn {
-          background: #1a73e8;
-          border-radius: 100px;
           .optionbtn-text {
-            font-family: Inter;
             font-style: normal;
             font-weight: 600;
             font-size: 16px;
             line-height: 19px;
-
-            color: #ffffff;
           }
         }
       }

src/user/dashboard/notifications/notifications.scss

@@ -50,7 +50,6 @@
         display: inline;
       }
       .tag {
-        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
         border-radius: 31px;
         padding: 2px;
         border: 1px solid #007bff;

src/user/organization/popups/Admins.js

@@ -105,17 +105,19 @@ class Admins extends Component {
         <Modal.Header closeButton className="modal__header">
           <Modal.Title className="modal__title">
             <div className="modal__main-title">Administrators</div>
-            <input
-              type="text"
-              placeholder="Search"
-              className="modal__search"
-              value={this.state.query}
-              onChange={this.onChange}
-              onKeyPress={this.onKeyPress}
-            />
-            <Button className="search_btn" onClick={this.onSearchClick}>
-              Search
-            </Button>
+            <div className="vertical-align-row">
+              <input
+                type="text"
+                placeholder="Search"
+                className="modal__search"
+                value={this.state.query}
+                onChange={this.onChange}
+                onKeyPress={this.onKeyPress}
+              />
+              <Button className="search_btn" onClick={this.onSearchClick}>
+                Search
+              </Button>
+            </div>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="modal__body">

src/user/organization/popups/Members.js

@@ -137,21 +137,23 @@ class Members extends Component {
         <Modal.Header closeButton className="modal__header">
           <Modal.Title className="modal__title">
             <div className="modal__main-title">Members</div>
-            <input 
-              type="text"
-              placeholder="Search"
-              className="modal__search"
-              name="query"
-              value={this.state.query}
-              onChange={this.onChange}
-              onKeyPress={this.onKeyPress}
-            />
-            <Button
-              className="search_btn"
-              onClick={this.onSearchClick}
-            >
-              Search
-            </Button>
+            <div className="vertical-align-row">
+              <input 
+                type="text"
+                placeholder="Search"
+                className="modal__search"
+                name="query"
+                value={this.state.query}
+                onChange={this.onChange}
+                onKeyPress={this.onKeyPress}
+              />
+              <Button
+                className="search_btn"
+                onClick={this.onSearchClick}
+              >
+                Search
+              </Button>
+            </div>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="modal__body">
@@ -163,7 +165,7 @@ class Members extends Component {
               <Form.Label htmlFor="email" className="email__header">
                 Get invite link
               </Form.Label>
-              <div className="add__member__input__container">
+              <div className="add__member__input__container vertical-align-row">
                 <Form.Control
                   as="input"
                   placeholder="Copy invite link to share"