From 5a6335b706867b2e830b3fd1f96d4ea090df9074 Mon Sep 17 00:00:00 2001
From: kitkatmia <alinka.markova@gmail.com>
Date: Sun, 9 Jan 2022 11:31:09 -0800
Subject: [PATCH 1/5] color-coded each schedule

---
 src/components/BellSchedule.js | 38 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/BellSchedule.js b/src/components/BellSchedule.js
index 7eba796..77e2cdb 100644
--- a/src/components/BellSchedule.js
+++ b/src/components/BellSchedule.js
@@ -1,9 +1,5 @@
-// @flow
-
 import React from 'react';
-
 import './BellSchedule.css';
-
 import Table from 'material-ui/Table/Table';
 import TableBody from 'material-ui/Table/TableBody';
 import TableCell from 'material-ui/Table/TableCell';
@@ -15,33 +11,27 @@ import Typography from 'material-ui/Typography';
 import Loadable from './LCEComponent';
 import Card from './Card';
 import WeatherIcon from '../containers/WeatherIconContainer';
-
 export type Period = {
   period: string,
   time: string,
   current: string,
   progress: Number
 };
-
 type Props = {
   loading: boolean,
   periods: Period[],
   error: any,
   scheduleName: string
 };
-
 const Loading = (
   <div className="card-padding center">
     <CircularProgress />
   </div>
 );
-
 const Empty = <div className="card-padding center">No school!</div>;
-
 const Error = (error: string) => (
   <div className="card-padding center">{error}</div>
 );
-
 const BellSchedule = ({
   periods,
   loading,
@@ -49,6 +39,18 @@ const BellSchedule = ({
   scheduleName,
   date
 }: Props) => {
+  const backgroundColorBellSchedule =
+    scheduleName.split(' ')[1] === 'A'
+      ? '#8DE3FF'
+      : scheduleName.split(' ')[1] === 'B' ? '#E0DBFF' : '#ffddf4';
+  // ADDED CODE BELOW TO CHANGE TEXT COLOR
+  // const textColorBellSchedule = scheduleName.split(' ')[1] === 'A' ? 'black' : scheduleName.split(' ')[1] === 'B' ? 'black' : '#FFBF00';
+  const bellBackground = {
+    backgroundColor: backgroundColorBellSchedule
+    // backgroundColorBellSchedule,
+    // ADDED CODE BELOW
+    // color: textColorBellSchedule
+  };
   return (
     <div className="bell-schedule">
       <Paper>
@@ -62,7 +64,11 @@ const BellSchedule = ({
         >
           <div>
             {scheduleName !== 'none' && (
-              <Typography type="title" className="bell-schedule-name">
+              <Typography
+                type="title"
+                className="bell-schedule-name"
+                style={bellBackground}
+              >
                 <div
                   style={{
                     display: 'flex',
@@ -73,13 +79,16 @@ const BellSchedule = ({
                   {scheduleName}
                   <WeatherIcon
                     date={date}
-                    style={{ width: '20px', aspectRatio: '1', padding: '1em' }}
+                    style={{
+                      width: '20px',
+                      aspectRatio: '1',
+                      padding: '0.75em'
+                    }}
                     class="weather"
                   />
                 </div>
               </Typography>
             )}
-
             <Table id={'table'}>
               <TableHead>
                 <TableRow>
@@ -109,7 +118,7 @@ const BellSchedule = ({
                           width: ${(1 - Math.min(Math.max(n.progress, 0), 1)) *
                             100}%;
                           height: 2px;
-                          background-color: #448aff;
+                          background-color: #448AFF;
                         }
                       `}
                         </style>
@@ -127,5 +136,4 @@ const BellSchedule = ({
     </div>
   );
 };
-
 export default BellSchedule;

From d83df735ff2ea847a6637d7451d323f43c157ba1 Mon Sep 17 00:00:00 2001
From: kitkatmia <alinka.markova@gmail.com>
Date: Sun, 9 Jan 2022 11:34:08 -0800
Subject: [PATCH 2/5] color-coded each schedule


From 4b8250a7e1e9e97734ab44b0cb4dea2e3cb1a584 Mon Sep 17 00:00:00 2001
From: kitkatmia <alinka.markova@gmail.com>
Date: Fri, 21 Jan 2022 13:24:19 -0800
Subject: [PATCH 3/5] Removed unnecessary comments

---
 src/components/BellSchedule.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/BellSchedule.js b/src/components/BellSchedule.js
index 77e2cdb..211830e 100644
--- a/src/components/BellSchedule.js
+++ b/src/components/BellSchedule.js
@@ -43,13 +43,8 @@ const BellSchedule = ({
     scheduleName.split(' ')[1] === 'A'
       ? '#8DE3FF'
       : scheduleName.split(' ')[1] === 'B' ? '#E0DBFF' : '#ffddf4';
-  // ADDED CODE BELOW TO CHANGE TEXT COLOR
-  // const textColorBellSchedule = scheduleName.split(' ')[1] === 'A' ? 'black' : scheduleName.split(' ')[1] === 'B' ? 'black' : '#FFBF00';
   const bellBackground = {
     backgroundColor: backgroundColorBellSchedule
-    // backgroundColorBellSchedule,
-    // ADDED CODE BELOW
-    // color: textColorBellSchedule
   };
   return (
     <div className="bell-schedule">

From f715a26aae6232e5f73ae1ec0e3816ac71b7a4ce Mon Sep 17 00:00:00 2001
From: kitkatmia <alinka.markova@gmail.com>
Date: Sat, 22 Jan 2022 13:24:25 -0800
Subject: [PATCH 4/5] Fixed spacing and added different color for irregular
 schedules

---
 src/components/BellSchedule.js | 160 +++++++++++++++++++++++++++++++--
 1 file changed, 153 insertions(+), 7 deletions(-)

diff --git a/src/components/BellSchedule.js b/src/components/BellSchedule.js
index 211830e..dfb7b64 100644
--- a/src/components/BellSchedule.js
+++ b/src/components/BellSchedule.js
@@ -1,5 +1,144 @@
+// import React from 'react';
+// import './BellSchedule.css';
+// import Table from 'material-ui/Table/Table';
+// import TableBody from 'material-ui/Table/TableBody';
+// import TableCell from 'material-ui/Table/TableCell';
+// import TableHead from 'material-ui/Table/TableHead';
+// import TableRow from 'material-ui/Table/TableRow';
+// import Paper from 'material-ui/Paper';
+// import CircularProgress from 'material-ui/Progress/CircularProgress';
+// import Typography from 'material-ui/Typography';
+// import Loadable from './LCEComponent';
+// import Card from './Card';
+// import WeatherIcon from '../containers/WeatherIconContainer';
+// export type Period = {
+//   period: string,
+//   time: string,
+//   current: string,
+//   progress: Number
+// };
+// type Props = {
+//   loading: boolean,
+//   periods: Period[],
+//   error: any,
+//   scheduleName: string
+// };
+// const Loading = (
+//   <div className="card-padding center">
+//     <CircularProgress />
+//   </div>
+// );
+// const Empty = <div className="card-padding center">No school!</div>;
+// const Error = (error: string) => (
+//   <div className="card-padding center">{error}</div>
+// );
+// const BellSchedule = ({
+//   periods,
+//   loading,
+//   error,
+//   scheduleName,
+//   date
+// }: Props) => {
+//   const backgroundColorBellSchedule =
+//     scheduleName.split(' ')[1] === 'A'
+//       ? '#8DE3FF'
+//       : scheduleName.split(' ')[1] === 'B' ? '#E0DBFF' : '#ffddf4';
+//   const bellBackground = {
+//     backgroundColor: backgroundColorBellSchedule
+//   };
+//   return (
+//     <div className="bell-schedule">
+//       <Paper>
+//         <Loadable
+//           loading={loading}
+//           data={periods}
+//           error={error}
+//           LoadingComponent={Loading}
+//           EmptyComponent={Empty}
+//           ErrorComponent={Error(error)}
+//         >
+//           <div>
+//             {scheduleName !== 'none' && (
+//               <Typography
+//                 type="title"
+//                 className="bell-schedule-name"
+//                 style={bellBackground}
+//               >
+//                 <div
+//                   style={{
+//                     display: 'flex',
+//                     alignItems: 'center',
+//                     justifyContent: 'center'
+//                   }}
+//                 >
+//                   {scheduleName}
+//                   <WeatherIcon
+//                     date={date}
+//                     style={{
+//                       width: '20px',
+//                       aspectRatio: '1',
+//                       padding: '0.75em'
+//                     }}
+//                     class="weather"
+//                   />
+//                 </div>
+//               </Typography>
+//             )}
+//             <Table id={'table'}>
+//               <TableHead>
+//                 <TableRow>
+//                   <TableCell numeric>Period</TableCell>
+//                   <TableCell>Time</TableCell>
+//                 </TableRow>
+//               </TableHead>
+//               <TableBody>
+//                 {periods.map((n, i) => {
+//                   return (
+//                     <TableRow
+//                       key={n.period}
+//                       id={'period' + n.period}
+//                       className={n.current ? 'bell-schedule-current' : ''}
+//                     >
+//                       {n.current && (
+//                         <style>
+//                           {`
+//                         #period${n.period} {
+//                           position: relative;
+//                         }
+//                         #period${n.period}::after {
+//                           content: '';
+//                           position: absolute;
+//                           bottom: 0;
+//                           right: 0;
+//                           width: ${(1 - Math.min(Math.max(n.progress, 0), 1)) *
+//                             100}%;
+//                           height: 2px;
+//                           background-color: #448AFF;
+//                         }
+//                       `}
+//                         </style>
+//                       )}
+//                       <TableCell numeric>{n.period}</TableCell>
+//                       <TableCell>{n.time}</TableCell>
+//                     </TableRow>
+//                   );
+//                 })}
+//               </TableBody>
+//             </Table>
+//           </div>
+//         </Loadable>
+//       </Paper>
+//     </div>
+//   );
+// };
+// export default BellSchedule;
+
+// @flow
+
 import React from 'react';
+
 import './BellSchedule.css';
+
 import Table from 'material-ui/Table/Table';
 import TableBody from 'material-ui/Table/TableBody';
 import TableCell from 'material-ui/Table/TableCell';
@@ -11,27 +150,33 @@ import Typography from 'material-ui/Typography';
 import Loadable from './LCEComponent';
 import Card from './Card';
 import WeatherIcon from '../containers/WeatherIconContainer';
+
 export type Period = {
   period: string,
   time: string,
   current: string,
   progress: Number
 };
+
 type Props = {
   loading: boolean,
   periods: Period[],
   error: any,
   scheduleName: string
 };
+
 const Loading = (
   <div className="card-padding center">
     <CircularProgress />
   </div>
 );
+
 const Empty = <div className="card-padding center">No school!</div>;
+
 const Error = (error: string) => (
   <div className="card-padding center">{error}</div>
 );
+
 const BellSchedule = ({
   periods,
   loading,
@@ -39,10 +184,13 @@ const BellSchedule = ({
   scheduleName,
   date
 }: Props) => {
+  // choosing the background color based on schedule (A, B, C, or irregular)
   const backgroundColorBellSchedule =
     scheduleName.split(' ')[1] === 'A'
       ? '#8DE3FF'
-      : scheduleName.split(' ')[1] === 'B' ? '#E0DBFF' : '#ffddf4';
+      : scheduleName.split(' ')[1] === 'B'
+        ? '#E0DBFF'
+        : scheduleName.split(' ')[1] === 'C' ? '#ffddf4' : '#ff8088';
   const bellBackground = {
     backgroundColor: backgroundColorBellSchedule
   };
@@ -74,16 +222,13 @@ const BellSchedule = ({
                   {scheduleName}
                   <WeatherIcon
                     date={date}
-                    style={{
-                      width: '20px',
-                      aspectRatio: '1',
-                      padding: '0.75em'
-                    }}
+                    style={{ width: '20px', aspectRatio: '1', padding: '1em' }}
                     class="weather"
                   />
                 </div>
               </Typography>
             )}
+
             <Table id={'table'}>
               <TableHead>
                 <TableRow>
@@ -113,7 +258,7 @@ const BellSchedule = ({
                           width: ${(1 - Math.min(Math.max(n.progress, 0), 1)) *
                             100}%;
                           height: 2px;
-                          background-color: #448AFF;
+                          background-color: #448aff;
                         }
                       `}
                         </style>
@@ -131,4 +276,5 @@ const BellSchedule = ({
     </div>
   );
 };
+
 export default BellSchedule;

From e1f8453416efe795d2fce98663da4b7d7cfba279 Mon Sep 17 00:00:00 2001
From: kitkatmia <alinka.markova@gmail.com>
Date: Sat, 22 Jan 2022 13:27:06 -0800
Subject: [PATCH 5/5] Removed unnecessary comments

---
 src/components/BellSchedule.js | 137 ---------------------------------
 1 file changed, 137 deletions(-)

diff --git a/src/components/BellSchedule.js b/src/components/BellSchedule.js
index dfb7b64..543a366 100644
--- a/src/components/BellSchedule.js
+++ b/src/components/BellSchedule.js
@@ -1,140 +1,3 @@
-// import React from 'react';
-// import './BellSchedule.css';
-// import Table from 'material-ui/Table/Table';
-// import TableBody from 'material-ui/Table/TableBody';
-// import TableCell from 'material-ui/Table/TableCell';
-// import TableHead from 'material-ui/Table/TableHead';
-// import TableRow from 'material-ui/Table/TableRow';
-// import Paper from 'material-ui/Paper';
-// import CircularProgress from 'material-ui/Progress/CircularProgress';
-// import Typography from 'material-ui/Typography';
-// import Loadable from './LCEComponent';
-// import Card from './Card';
-// import WeatherIcon from '../containers/WeatherIconContainer';
-// export type Period = {
-//   period: string,
-//   time: string,
-//   current: string,
-//   progress: Number
-// };
-// type Props = {
-//   loading: boolean,
-//   periods: Period[],
-//   error: any,
-//   scheduleName: string
-// };
-// const Loading = (
-//   <div className="card-padding center">
-//     <CircularProgress />
-//   </div>
-// );
-// const Empty = <div className="card-padding center">No school!</div>;
-// const Error = (error: string) => (
-//   <div className="card-padding center">{error}</div>
-// );
-// const BellSchedule = ({
-//   periods,
-//   loading,
-//   error,
-//   scheduleName,
-//   date
-// }: Props) => {
-//   const backgroundColorBellSchedule =
-//     scheduleName.split(' ')[1] === 'A'
-//       ? '#8DE3FF'
-//       : scheduleName.split(' ')[1] === 'B' ? '#E0DBFF' : '#ffddf4';
-//   const bellBackground = {
-//     backgroundColor: backgroundColorBellSchedule
-//   };
-//   return (
-//     <div className="bell-schedule">
-//       <Paper>
-//         <Loadable
-//           loading={loading}
-//           data={periods}
-//           error={error}
-//           LoadingComponent={Loading}
-//           EmptyComponent={Empty}
-//           ErrorComponent={Error(error)}
-//         >
-//           <div>
-//             {scheduleName !== 'none' && (
-//               <Typography
-//                 type="title"
-//                 className="bell-schedule-name"
-//                 style={bellBackground}
-//               >
-//                 <div
-//                   style={{
-//                     display: 'flex',
-//                     alignItems: 'center',
-//                     justifyContent: 'center'
-//                   }}
-//                 >
-//                   {scheduleName}
-//                   <WeatherIcon
-//                     date={date}
-//                     style={{
-//                       width: '20px',
-//                       aspectRatio: '1',
-//                       padding: '0.75em'
-//                     }}
-//                     class="weather"
-//                   />
-//                 </div>
-//               </Typography>
-//             )}
-//             <Table id={'table'}>
-//               <TableHead>
-//                 <TableRow>
-//                   <TableCell numeric>Period</TableCell>
-//                   <TableCell>Time</TableCell>
-//                 </TableRow>
-//               </TableHead>
-//               <TableBody>
-//                 {periods.map((n, i) => {
-//                   return (
-//                     <TableRow
-//                       key={n.period}
-//                       id={'period' + n.period}
-//                       className={n.current ? 'bell-schedule-current' : ''}
-//                     >
-//                       {n.current && (
-//                         <style>
-//                           {`
-//                         #period${n.period} {
-//                           position: relative;
-//                         }
-//                         #period${n.period}::after {
-//                           content: '';
-//                           position: absolute;
-//                           bottom: 0;
-//                           right: 0;
-//                           width: ${(1 - Math.min(Math.max(n.progress, 0), 1)) *
-//                             100}%;
-//                           height: 2px;
-//                           background-color: #448AFF;
-//                         }
-//                       `}
-//                         </style>
-//                       )}
-//                       <TableCell numeric>{n.period}</TableCell>
-//                       <TableCell>{n.time}</TableCell>
-//                     </TableRow>
-//                   );
-//                 })}
-//               </TableBody>
-//             </Table>
-//           </div>
-//         </Loadable>
-//       </Paper>
-//     </div>
-//   );
-// };
-// export default BellSchedule;
-
-// @flow
-
 import React from 'react';
 
 import './BellSchedule.css';