gitignore

.gitignore

@@ -1,28 +1,3 @@
-<<<<<<< HEAD
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-=======
 # Logs
 logs
 *.log
@@ -127,4 +102,3 @@ dist
 
 # TernJS port file
 .tern-port
->>>>>>> 254a95588736bd9325234abbe65c03dd70dc0689

src/components/ExpandedSegment.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import './expandedSegment.scss';
 class ExpandedSegment extends Component {
 
@@ -24,8 +24,10 @@ class ExpandedSegment extends Component {
         <div className="descriptionContainer">
           {this.props.description}
         </div>
-        <div className="finderDetails">
-          {this.props.date}
+        <div className="basicBorder">
+          <div className="finderDetails">
+            {this.props.date}
+          </div>
         </div>
       </div>
     )

src/components/expandedSegment.scss

@@ -13,7 +13,7 @@
 .periodicElement{
   font-family: 'Play', sans-serif;
   font-size: 30px;
-  color: white;
+  color:white;
   background-color:  #6F23D9;
   height: 150px;
   width: 150px;
@@ -24,16 +24,16 @@
   font-family: 'Play', sans-serif;
   font-size: 14px;
   background-color:  #6F23D9;
-  color: white;
+  color: #f7e8f6;
   height: 350px;
   width: 350px;
-  text-align: center;
+  text-align: justify;
   padding: 20px;
   border-radius: 5%;
 }
 .finderDetails{
   font-family: 'Play', sans-serif;
-  background-color: palegreen;
+  background-color: #6F23D9;
   color: white;
   height: 150px;
   width: 150px;
@@ -42,6 +42,13 @@
   margin-top:15px;
   border-radius: 5%;
 }
+.basicBorder{
+  border-radius: 5%;
+  height: 150px;
+  width: 150px;
+  padding: 10px;
+  z-index: -1;
+}
 .animatedBorder{
   border-radius: 5%;
   animation: shine 7s linear infinite;
@@ -63,6 +70,6 @@
     inset -20px 0 300px #0ff, /* inner right cyan broad */
     0 0 50px #fff,            /* outer white */
     -10px 0 80px #f0f,        /* outer left magenta */
-    10px 0 80px #0ff; 
+    10px 0 80px #010440; 
   }
 }

src/elementsData.json

@@ -5,10 +5,10 @@
     "symbol": "H",
     "name": "Hydrogen",
     "atomic_weight": "1.0078",
-    "description": "something",
-    "examples": "something",
-    "discovered_in": "1029",
-    "discovered_by": "Helena"
+    "description": "This colourless and odourless gas it's lightest element in the periodic table. It reacts vigorously with oxygen, which caused the end of use of it in filling airships - famous Hindenberg catastrophy was caused by it. Hydrogen can be find in the water and almost all the molecules of living things. Most of the stars (including sun) and the planet Jupiter are made out of hydrogen. Hydrogen can be produced by electrolysis of water and by heating natural gas with steam from syngas. The syngas is then separated to give hydrogen.",
+    "examples": "It can fuel cells to generate electricity, power or heat; it's used in fertiliser production, ",
+    "discovered_in": "1766",
+    "discovered_by": "Henry Cavendish"
   },
   {
     "_id": "2",