Component styling

[olyaee]

The shared Component styling (i.e. for Buttons, Dropdowns, and other Components that are used in multiple places) should not be done in the JS files. Rather it should be done in centralized .css files. (There is already one file like that - index.css)
Component Specific Styling, whenever possible, should also be done inside of css files.

[Waldleufer]

During search I found these 33 results for style={ in 17 files

• frontend\src\components\cards\CardComponent.js: //Wontfix -unused

  75                      <span className={classes.title}>{title}</span>
  76:                     <Row style={{ marginTop: 8, marginBottom: 16 }}>
  77                          <span className={classes.subtitle}>{subtitle}</span>

• frontend\src\components\cards\MiniCardComponent.js:

  47              {/*  Resize the image on the cards (product images)            */}
  48:             <div style={{ width: 130, paddingTop: 20, paddingBottom: 20 }}>
  49                  {/* define the image path */}

• frontend\src\components\collapsible\CollapsibleContent.js:

  64              {...others}
  65:             style={{
  66                  overflow: 'hidden',

• frontend\src\components\dashboard\TodayTrendsComponent.js: //Wontfix -unused

  84              <Row vertical='center'>
  85:                 <div style={{ width: 16, border: '2px solid', borderColor: color }}></div>
  86                  <span className={classes.legendTitle}>{title}</span>

• frontend\src\components\details\CanvasComponent.jsx:

  19          return (
  20:             <div className='w3-row w3-container' fluid='true' style={{ padding: 0 }}>
  21                  <div className='w3-row'>
  22:                     <div className='w3-col l6 m12 s12 w3-left' style={{ marginTop: 30 }}>
  23                          <h3
  24                              className='ChartItemsTitle'
  25:                             style={{
  26                                  marginLeft: 86

  33                      </div>
  34:                     <div className='w3-col l6 m12 s12 w3-right' style={{ marginTop: 30 }}>
  35                          <h3
  36                              className='ChartItemsTitle'
  37:                             style={{
  38                                  marginLeft: 100

  47                  <div className='w3-row'>
  48:                     <div className='w3-col l12 m12 s12' style={{ marginTop: 30, marginBottom: 30 }}>
  49                          <h3 className='ChartItemsTitle'> Impact categories </h3>

• frontend\src\components\details\DetailsComponent.js:

  69              return (
  70:                 <Container id='capture' fluid={true} style={{ padding: 'auto' }}>
  71:                     <Row style={{ padding: 0 }}>
  72                          <Col>

  85              return (
  86:                 <Container id='capture' fluid={true} style={{ padding: 0, margin: 0 }}>
  87                      <Row gutterWidth={0}>
  88:                         <Col xs={6} sm={6} md={6} lg={6} style={{ padding: 0 }}>
  89                              <ScenarioComponent

  97  
  98:                         <Col xs={6} sm={6} md={6} lg={6} style={{ padding: 0 }}>
  99                              <ScenarioComponent

• frontend\src\components\details\PieChartComponent.jsx:

  56      return (
  57:         <div className='ChartItems' style={{ width: '%100', height: '300px' }} id='chart'>
  58              <ReactApexChart options={options} series={series} type='donut' />

• frontend\src\components\details\ScenarioComponent.js:

  17          return (
  18:             <Container fluid={true} style={{ padding: 0, margin: 10, backgroundColor: 'white' }}>
  19                  <NavbarComponent

  24                  />
  25:                 <Container fluid={true} style={{ padding: 'auto' }}>
  26                      <h2 className='TextContent'>

  41                              lg={4}
  42:                             style={{ margin: 'auto' }}
  43                              className='PieChartCardsContainer'

• frontend\src\components\details\TableComponent.jsx:

  88                      <thead>
  89:                         <tr key={'FirstRow'} style={{ backgroundColor: '#d6aa78' }}>
  90                              {this.state.headers.map((item) => (

• frontend\src\components\header\HeaderComponent.js:

  111  
  112:                 <Row vertical='baseline' horizontal='flex-start' style={{ marginRight: 20 }}>
  113                      <div className='HeaderIconSyle'>

• frontend\src\components\loading\LoadingComponent.js:

  58      return (
  59:         <div style={{ position: 'relative', height, width }}>
  60              {loading && (

• frontend\src\components\login\LoginComponent.js:

  56                              className='login-container'
  57:                             style={{
  58                                  marginTop: '10px',

• frontend\src\components\login\Registration.js: @manifau When we use that at some point, maybe you can then move the styling to .css, I won't change this for now 🙂

  19              <div
  20:                 style={{
  21                      display: 'flex',

  26                  <div
  27:                     style={{
  28                          display: 'flex',

  49                  <div
  50:                     style={{
  51                          display: 'flex',

  73                  <div
  74:                     style={{
  75                          display: 'flex',

  81                  >
  82:                     <select {...register('Title', { required: true })} style={{ width: '100px' }}>
  83                          <option value='Mr'>Mr</option>

• frontend\src\components\sidebar\MenuItemComponent.js:

  68              <Row vertical='center' onClick={onItemClicked} className={classNameContainer}>
  69:                 <div className='SideBarIconStyle' style={{color:iconColor}}>
  70                      <i className={Icon} aria-hidden="true"/>
  71                  </div>  
  72:                 <span className="SideBarTitle" style={{color:iconColor}}>{title}</span>
  73  

• frontend\src\routes\PrivateSection.js:

  48                      />
  49:                     <div id='page-wrap' style={{ width: 'calc(100% - 200px)' }}>
  50                          <HeaderComponent />

• frontend\src\routes\PublicRoutes.js:

  14              <Switch>
  15:                 {/* <img src={logo} style={{padding:20}} /> */}
  16                  <Route exact path={SLUGS.login} component={LoginComponent} />

• frontend\src\routes\dynamicPaths\ProductSolutionsServicesComponent.js:

  51              <Row className={classes.subtitle}>
  52:                 <div style={{ marginLeft: 15 }}>
  53                      <ProductGridComponent selectedCategory={type} />

[IremToroslu]

thanks Martin 😄 will have a look over them.

[IremToroslu]

we do not need todaystrends . And when it comes to cardcomponants and minicardcomponants , I am on it 😄

[manifau]

@Waldleufer I was going to work on it today but you are correct we can change the styling to .css for the registration page if we use it later :)