Merge pull request #517 from debtcollective/development

New member hub pages

.standard.yml

@@ -1,11 +1,12 @@
-fix: true               # default: false
-parallel: true          # default: false
-format: progress        # default: Standard::Formatter
-ruby_version: 2.3.3     # default: RUBY_VERSION
-default_ignores: false  # default: true
+fix: true # default: false
+parallel: true # default: false
+format: progress # default: Standard::Formatter
+ruby_version: 2.3.3 # default: RUBY_VERSION
+default_ignores: false # default: true
 
-ignore:                 # default: []
+ignore: # default: []
   - 'db/schema.rb'
   - 'vendor/**/*'
+  - 'app/views/memberships/edit_card.html.erb'
   - 'spec/**/*':
-    - Metrics/BlockLength
+      - Metrics/BlockLength

app/assets/stylesheets/_forms.scss

@@ -31,3 +31,35 @@
 .StripeElement--webkit-autofill {
   background-color: #fefde5 !important;
 }
+
+.profile-container,
+.edit-card,
+.edit-status {
+  input,
+  .react-date-picker__wrapper,
+  textarea,
+  select,
+  #stripe-elements {
+    background: rgba(91, 203, 181, 0.1);
+    border: 1px solid #219653;
+    box-sizing: border-box;
+    border-radius: 6px;
+    input {
+      // background: rgba(91, 203, 181, 0.1);
+      border: none;
+      border-radius: 0;
+    }
+  }
+  .react-date-picker__wrapper {
+    width: 68%;
+    min-width: 150px;
+  }
+  .submit-btn-container input,
+  button.submit-btn,
+  .pause-membership-btn,
+  .resume-membership-btn {
+    background: #24ba9d;
+    border: solid 1px transparent;
+    border-radius: 8px;
+  }
+}

app/assets/stylesheets/_sidebar.scss

@@ -0,0 +1,21 @@
+nav {
+  .sidebar-item {
+    color: rgb(67, 67, 67);
+    box-shadow: 1px 1px 3px rgba(34, 34, 34, 0.2);
+
+    // height: 4rem;
+    // font-weight: 300;
+
+    // font-size: 1rem;
+    // justify-content: space-between;
+    // padding: 1rem 1.5rem;
+    // border-radius: 0px 4px 4px 0px;
+    &.current-path {
+      background: #434343;
+      color: #ffffff;
+      svg path {
+        fill: #ffffff;
+      }
+    }
+  }
+}

app/assets/stylesheets/application.scss

@@ -15,14 +15,14 @@
  *= require_self
  */
 
-@import "base/globals.scss";
+@import 'base/globals.scss';
 
 html,
 body {
   font-size: 100%;
   margin: 0;
   padding: 0;
-  font-family: "Libre Franklin", sans-serif;
+  font-family: 'Libre Franklin' !important;
   height: 100vh;
 }
 

app/assets/stylesheets/membership.scss

@@ -0,0 +1,23 @@
+.membership,
+.membership-edit-amount {
+  .subscription-amount,
+  input {
+    background: rgba(91, 203, 181, 0.1);
+    border: 1px solid #219653;
+    box-sizing: border-box;
+    border-radius: 6px;
+  }
+  .update-cc-link,
+  .change-amount-link,
+  .update-status-link,
+  .edit-amount-button {
+    background: #24ba9d;
+    border: solid 1px transparent;
+    border-radius: 8px;
+  }
+}
+
+.membership h3 {
+  // font-size: 4rem;
+  // line-height: 1;
+}

app/components/address_field_component.html.erb

@@ -1,27 +1,27 @@
 <fieldset class="mt-2 bg-white">
   <legend class="block text-sm font-medium text-gray-700">Address</legend>
-  <div class="mt-1 -space-y-px rounded-md shadow-sm">
-    <div>
+  <div class="mt-1 rounded-md shadow-sm">
+    <div class="my-4">
       <%= f.label :address_line1, class: "sr-only" %>
       <%= f.text_field :address_line1, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none rounded-t-md bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "Street" %>
     </div>
-    <div>
+    <div class="my-4">
       <%= f.label :address_city, class: "sr-only" %>
       <%= f.text_field :address_city, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "City" %>
     </div>
-    <div class="flex">
-      <div class="w-full">
+    <div class="flex my-4">
+      <div class="w-full mr-2">
         <%= f.label :address_state, class: "sr-only" %>
         <%= f.text_field :address_state, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "State" %>
       </div>
-      <div class="w-full">
+      <div class="w-full ml-2">
         <%= f.label :address_zip, class: "sr-only" %>
         <%= f.text_field :address_zip, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300 border-l-0", placeholder: "Postal code" %>
       </div>
     </div>
-    <div>
+    <div class="my-4">
       <%= f.label :address_country_code, class: "sr-only" %>
       <%= f.country_select(:address_country_code, {priority_countries: ['US', 'CA'], include_blank: "Select country"}, {class: 'focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none rounded-b-md bg-transparent focus:z-10 sm:text-sm border-gray-300', id: 'address-country-code-select', required: true}) %>
     </div>
   </div>
-</fieldset>
+</fieldset>

app/controllers/user_profiles_controller.rb

@@ -40,6 +40,8 @@ def user_profile_params
       :address_zip,
       :address_country,
       :address_country_code,
+      :about_me,
+      :why_joined,
       :facebook,
       :twitter,
       :instagram,

app/helpers/svg_helper.rb

@@ -0,0 +1,7 @@
+module SvgHelper
+  def show_svg(path)
+    File.open("app/assets/icons/#{path}", "rb") do |file|
+      raw file.read
+    end
+  end
+end

app/javascript/bundles/Admin/components/Dashboard/Metric.jsx

@@ -11,14 +11,14 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
     padding: theme.spacing(2),
     flex: 1,
-    textAlign: 'center'
+    textAlign: 'center',
   },
   text: {
-    fontSize: '3rem'
+    fontSize: '3rem',
   },
   description: {
-    fontSize: '1rem'
-  }
+    fontSize: '1rem',
+  },
 }))
 
 export const Metric = ({ description, text }) => {
@@ -34,5 +34,5 @@ export const Metric = ({ description, text }) => {
 
 Metric.propTypes = {
   description: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
 }

app/javascript/bundles/Admin/components/Dashboard/index.jsx

@@ -9,8 +9,8 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    flexWrap: 'wrap'
-  }
+    flexWrap: 'wrap',
+  },
 }))
 
 const transformToMoneyFormat = number => numeral(number).format('$0,0.00')
@@ -19,7 +19,7 @@ const DashboardView = ({
   activeSubsctiptions,
   amountFromSubscriptions,
   donationsCount,
-  amountFromDonations
+  amountFromDonations,
 }) => {
   const classes = useStyles()
 
@@ -52,7 +52,7 @@ DashboardView.propTypes = {
   activeSubsctiptions: PropTypes.number.isRequired,
   amountFromSubscriptions: PropTypes.number.isRequired,
   donationsCount: PropTypes.number.isRequired,
-  amountFromDonations: PropTypes.number.isRequired
+  amountFromDonations: PropTypes.number.isRequired,
 }
 
 export const Dashboard = props => <DashboardView {...props} />

app/javascript/bundles/Admin/components/Donations/Table.jsx

@@ -14,16 +14,16 @@ const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
     marginTop: theme.spacing(3),
-    overflowX: 'auto'
+    overflowX: 'auto',
   },
   table: {
-    minWidth: 650
-  }
+    minWidth: 650,
+  },
 }))
 
 const DONATION_TYPES = {
   ONE_OFF: 'One time Contribution',
-  SUBSCRIPTION: 'Monthly Subscription'
+  SUBSCRIPTION: 'Monthly Subscription',
 }
 
 export default function DonationsTable ({ donations }) {
@@ -66,9 +66,9 @@ export default function DonationsTable ({ donations }) {
 }
 
 DonationsTable.propTypes = {
-  donations: PropTypes.array
+  donations: PropTypes.array,
 }
 
 DonationsTable.defaultTypes = {
-  donations: []
+  donations: [],
 }

app/javascript/bundles/Admin/components/Drawer.jsx

@@ -25,38 +25,38 @@ const drawerWidth = 240
 
 const useStyles = makeStyles(theme => ({
   root: {
-    display: 'flex'
+    display: 'flex',
   },
   drawer: {
     [theme.breakpoints.up('sm')]: {
       width: drawerWidth,
-      flexShrink: 0
-    }
+      flexShrink: 0,
+    },
   },
   appBar: {
     marginLeft: drawerWidth,
     [theme.breakpoints.up('sm')]: {
-      width: `calc(100% - ${drawerWidth}px)`
-    }
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
   },
   menuButton: {
     marginRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      display: 'none'
-    }
+      display: 'none',
+    },
   },
   toolbar: theme.mixins.toolbar,
   drawerPaper: {
-    width: drawerWidth
+    width: drawerWidth,
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing(3)
+    padding: theme.spacing(3),
   },
   rootLink: {
     padding: '0.25rem 0.5rem 0',
-    display: 'block'
-  }
+    display: 'block',
+  },
 }))
 
 function ResponsiveDrawer (props) {
@@ -135,10 +135,10 @@ function ResponsiveDrawer (props) {
             open={mobileOpen}
             onClose={handleDrawerToggle}
             classes={{
-              paper: classes.drawerPaper
+              paper: classes.drawerPaper,
             }}
             ModalProps={{
-              keepMounted: true // Better open performance on mobile.
+              keepMounted: true, // Better open performance on mobile.
             }}
           >
             {drawer(logoUrl)}
@@ -147,7 +147,7 @@ function ResponsiveDrawer (props) {
         <Hidden xsDown implementation='css'>
           <Drawer
             classes={{
-              paper: classes.drawerPaper
+              paper: classes.drawerPaper,
             }}
             variant='permanent'
             open
@@ -162,7 +162,7 @@ function ResponsiveDrawer (props) {
 
 ResponsiveDrawer.propTypes = {
   pageTitle: PropTypes.string.isRequired,
-  logoUrl: PropTypes.string.isRequired
+  logoUrl: PropTypes.string.isRequired,
 }
 
 export default props => <ResponsiveDrawer {...props} />

app/javascript/bundles/Admin/components/Funds/Table.jsx

@@ -13,11 +13,11 @@ const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
     marginTop: theme.spacing(3),
-    overflowX: 'auto'
+    overflowX: 'auto',
   },
   table: {
-    minWidth: 650
-  }
+    minWidth: 650,
+  },
 }))
 
 export default function FundsTable ({ funds }) {
@@ -62,9 +62,9 @@ export default function FundsTable ({ funds }) {
 }
 
 FundsTable.propTypes = {
-  funds: PropTypes.array
+  funds: PropTypes.array,
 }
 
 FundsTable.defaultTypes = {
-  funds: []
+  funds: [],
 }