use: bulma v1 (#69)

* trying: pass the bulma breaking changes

* fix: bulma 1.0

* fix: some ui bullshits happened after bulma v1

package-lock.json

@@ -11,13 +11,13 @@
         "@testing-library/jest-dom": "^5.11.6",
         "@testing-library/react": "^11.2.2",
         "@testing-library/user-event": "^12.5.0",
-        "bulma": "^0.9.4",
+        "bulma": "^1.0.0",
         "powerglitch": "^2.3.2",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-intl": "^5.10.9",
         "react-scripts": "^5.0.1",
-        "sass": "^1.30.0",
+        "sass": "^1.71.1",
         "web-vitals": "^0.2.4"
       }
     },
@@ -5513,9 +5513,12 @@
       }
     },
     "node_modules/bulma": {
-      "version": "0.9.4",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz",
-      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+      "integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==",
+      "dependencies": {
+        "sass": "^1.71.1"
+      }
     },
     "node_modules/bytes": {
       "version": "3.0.0",
@@ -14716,9 +14719,9 @@
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
     "node_modules/sass": {
-      "version": "1.58.3",
+      "version": "1.75.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
-      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
+      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -14728,7 +14731,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-loader": {

package.json

@@ -6,13 +6,13 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.0",
     "powerglitch": "^2.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-intl": "^5.10.9",
     "react-scripts": "^5.0.1",
-    "sass": "^1.30.0",
+    "sass": "^1.71.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/_sass/index.scss

@@ -1 +1 @@
-@import "main.scss";
+@use "main.scss";

src/_sass/main.scss

@@ -7,41 +7,29 @@ $deep-koamaru: #152528;
 $myrtle-green: #1d353a;
 $cadet-blue: #25444b;
 $neon-carrot: #142225;
-$white: #ffffff;
 $admink-brand: #f38d68;
 
-/**
+@use "bulma/sass" with (
-    Variables Bulma
+  $primary: $cadet-blue,
-**/
+  $info: $myrtle-green,
-$primary: $cadet-blue;
+  $footer-color: $deep-koamaru,
-$primary-invert: #fff;
+  $success: $deep-koamaru,
-$info: $myrtle-green;
+  $link: $neon-carrot
-$info-invert: #fff;
+);
-$footer-color: $deep-koamaru;
-$success: $deep-koamaru;
-$link: $neon-carrot;
-$link-hover: "";
 
 html {
-  background-color: $primary;
+  background-color: $myrtle-green;
 }
 
 body {
   overflow-x: hidden;
 }
 
-@import "../../node_modules/bulma/bulma";
-
 #idCard {
   .hero-body {
     padding-bottom: 2rem;
     padding-top: 2rem;
   }
-
-  // permet de re-aligner les tags avec les subtitles
-  .tags {
-    margin-top: -1.25rem;
-  }
 }
 
 // retire les barres de scroll des panneaux experience/education
@@ -50,7 +38,7 @@ body {
 }
 
 footer {
-  background-color: $footer-color !important;
+  background-color: $deep-koamaru !important;
   color: #fff;
 }
 
@@ -89,12 +77,12 @@ section#contact .button {
 
 //
 footer small {
-  color: $white;
+  color: #fff;
 }
 
 // Photo de Profil
 #photoProfil {
-  background-color: $primary;
+  background-color: $myrtle-green;
 }
 
 .tile.is-vertical {

src/components/ExperienceCard/ExperienceCard.js

@@ -32,14 +32,14 @@ export default class ExperienceCard extends Component {
                             return <span key={index} className="tag">{name}</span>;
                         })}
                     </div>
+                    <div className='description content'>
+                        <div dangerouslySetInnerHTML={{ __html: data.description }} />
+                    </div>
+                    {data.commentaire ? <div className="comment">
+                        {data.commentaire}
+                    </div> : ''}
                 </div>
             </div>
-            <div className='content'>
-                <div dangerouslySetInnerHTML={{ __html: data.description }} /> 
-            </div>
-            {data.commentaire ? <div className="comment">
-                {data.commentaire}
-            </div> : ''}
 
         </div>
     }

src/components/ExperienceCard/ExperienceCard.scss

@@ -1,4 +1,15 @@
-.comment{
+.comment {
-    font-style: italic;
+  font-style: italic;
-    margin-top: -25px;
+  margin-top: -25px;
-}
+}
+
+// permet de re-aligner les tags avec les subtitles
+.tags,
+.description,
+.comment {
+  margin-top: -1.25rem;
+}
+
+.card-content {
+  margin-top: 1rem;
+}

src/components/MainCard/MainCard.js

@@ -52,7 +52,7 @@ class MainCard extends Component {
             <div className="hero-body">
                 <div className="container">
                     <div className="columns">
-                        <div className="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                        <div className="column is-1 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
                         <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
                             <div className="card">
                                 <div className="card-image">

src/components/MainCard/MainCard.scss

@@ -1,5 +1,3 @@
-@import "../../_sass/main.scss";
-
 #photoProfil {
   overflow: clip;
   border: 1px solid #3c3c3c;

src/components/ProjectCard/ProjectCard.js

@@ -9,8 +9,8 @@ export default class ProjectCard extends Component {
         const data = this.props.data;
         return <div className="tile is-vertical is-4">
             <div className="tile">
-                <div className="tile is-parent">
+                <div className="cell">
-                    <article className="tile is-child notification is-info">
+                    <article className="box notification is-info">
                         <p className="title">
                             <a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
                         </p>

src/components/ProjectsCard/ProjectsCard.js

@@ -12,7 +12,7 @@ class ProjectsCard extends Component {
     return <section id="projets" className="hero is-success">
       <div className="hero-body">
         <div className="container">
-          <div className="tile is-ancestor">
+          <div className="grid">
             {projectCardsMessage.projects.map(function (projects, index) {
               return <ProjectCard key={index}
                 data={projects}