Single article page

package.json

@@ -11,7 +11,6 @@
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
-        "bootstrap": "^4.5.0",
         "firebase": "^7.16.0",
         "i18next": "^19.6.2",
         "i18next-browser-languagedetector": "^5.0.0",

src/components/blog-cards/BlogCard.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Col, Row, Container, Image } from 'react-bootstrap';
+import blogArticles from './blog.json';
+
+export default function BlogCard() {
+  const newBlogArticles = blogArticles.map((blog) => {
+    return (
+      <div>
+        <Container key={blog.id}>
+          <Row>
+            <Col xs={6} md={6} lg={8}>
+              <h3>{blog.title}</h3>
+              <span>{blog.body.substring(0, 200)}</span>
+            </Col>
+            <Col xs={6} md={4} lg={3}>
+              <Image src="holder.js/171x180" roundedCircle />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    );
+  });
+}

src/components/blog-cards/blog.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": 1,
+    "title": "My Intersectional Activism as a Black African Muslim Woman",
+    "body": "My identities as being a Black Muslim woman who is also African come in one. I experience discrimination in many unique ways: my skin colour, my gender, my religion and being African. Often, the notion of have these identities tend to equate to me being a ‘thug’ (black), a ‘terrorist’ (Muslim), ‘poor’ (African) and oppressed (woman). But I’m here to say that this is not the case and I would not have it any other way. This is why I always emphasise on the importance of intersectional activism.Naturally, having these intersections make me an activist. I fight for Black people and for women, for Muslims and for Africans. I guess you could say I’m quite strong. Pay attention to those who are being excluded. It is vital to pay attention and listen to those whose voices often go unheard or are dismissed. I am very skilled in this because when I am fighting for one part of my identity – often the other 3 go dismissed. Perfect example: the Black Lives Matter movement. Certain parts of the Muslim community do not acknowledge the Black Lives Matter movement because it’s a ‘race’ issue, not a religion issue. As if black Muslims are not being shot by police too, such as Yassin Mohammed and Amadou Diallo. Some bring up ‘what about Palestine?’ yet fail to acknowledge the suffering of Afro-Palestinians. Others are excluding disabled black people from the Black Lives Matter movement as we are less likely to hear their stories. My identities are just as important – they come as one. My Blackness does not exclude my ‘Muslimness’ or my ‘Africaness’ or my ‘womanhood’. They matter just as much as each other. A perfect example of this would be the unfortunate killing of Shukri Abdi, which has prompted conversations on social media when it comes to #BlackLivesMatter. Shukri was an immigrant from Somalia who was murdered in Manchester, England and she had the same identities as me – Black, Muslim, African and a girl. Shukri’s death shook the Internet as it really exposed the lack of intersectional activism that some people have. Some ignored her death because of her Muslim identity or claimed that she’s Somali and not Black. Either way, I am not part of the Somali community so I cannot fully comment on her identity. Obviously, not all Black people in the UK are excluding her death but just a select few. I just wanted to re-emphasise the importance of why ALL Black Lives Matter! #JusticeforShukriAbdi Mental health matters too. Another intersection is mental health and ability. Yassin Mohammed was murdered by police in the US. He was a Sudanese immigrant with mental health issues. Another death that was swept under the rug until it picked up on Twitter. Why is that? Certain demographics fail to acknowledge intersections such as mental health and his immigrant identity, similar to Shukri’s. Perhaps he was not ‘Black’ enough because he had Sudanese descent or because he was a Muslim? Yassin’s and Shukri’s murders are just as important to the Black Lives Matter movement. Regardless of their Muslim or immigrant identity, we must say their names too. Their lives mattered. #BlackLivesMatter is global. Following the murder of George Floyd, protests literally sparked across the globe with many black women leading at the forefront. Two 18 year old women organised the London protests. Assa Traoré in France lead the #BlackLivesMatter movement for her brother Adama Traoré. He was murdered and many other lives taken from state sanctioned violence. These international protests are not significantly only for George Floyd or for Breonna Taylor or for Tony McDade, but for the countless black people murdered daily due to this state sanctioned violence. It highlights how anti-blackness is perpetuated all over the globe. It also puts into perspective how a new global order could potentially occur – how things can change and how we can be the change. “I am not free while any woman is unfree, even when her shackles are very different from my own.”  – Audre Lorde <br> Finally, I just wanted to leave this here and just want to remind people to always take an intersectional approach to activism. Because ALL Black Lives Matter around the world.",
+    "author": "Bashirat Oladele",
+    "img_url": "../../images/safe-image.jpeg"
+  },
+  {
+    "id": 2,
+    "title": "An Open Letter to My Abuser",
+    "body": "It is hard to put into words all that you put me through. This letter is, I know, another vain attempt to master the chaos within me. But trying is always a better option than quitting, I suppose.<br>Sometimes I wish you could go through the pain and struggle you put me through, but really I know there’s no way I’d want another soul to go through it.<br>I’ve held onto this pain for so many years because I genuinely believed that some day it would stop. I always believed you were something more than you appear to be. But you continued taking advantage of my innocence until eventually, you destroyed it completely.<br>You thought you were powerful because you played an attacker? You thought I was weak because I played a victim? The truth is, your victim is always superior to you in every way.<br>I would be lying if I told you I never thought about revenge. My mind wandered but my demons never got the better of me. Maybe I was simply too young to retaliate, or maybe I was too wise. I knew that if I were to sink to your level, you and I would be no different. One thing I’ve known for sure for all these years is that I never want to become a reflection of you.<br>I’ve wondered to myself, “do people always do these things to the ones they love?” I’ve thought that maybe I just don’t know enough about love.<br>“If you hadn’t made me so angry, I wouldn’t have hit you or said those things,” you’d say. You would always make an excuse. Over time, I started to believe the fault was in me.<br>But today, I choose to stop blaming myself. It was never my fault to begin with. There is nothing I said or did that made it okay for you to hurt me with your words or your fists.<br>I am not an excuse for your incapability to control your emotions. I am not the cause of your outbursts. I am not your rage or your hate. I am not your false pride or fragile ego. I am not the weakness you always claimed to see in me. I am not the names you called me.<br>You don’t define me. I define myself. I am much more than the marks you’ve left on my body. I am innocence. I am dreams. I am hope. I am forgiveness. I am the person others always want to have around because I am laughter and I am love.<br>I hope the scars on my heart heal faster than the ones on my body. But the wounds within you? Whatever caused them, I hope they heal even faster than mine. And when that day comes, I will be long-gone from your life and it will be too late to reach out to me to tell me that you’re sorry.<br>But today I forgive you, because today I want to be free.<br>From,<br>The Young Woman Whose Life You Changed Forever",
+    "author": "Anonymous",
+    "img_url": "../../images/leon-biss.jpg"
+  },
+  {
+    "id": 3,
+    "title": "5 Things I’ve Learned from Malala Yousafzai",
+    "body": "Today is Malala Yousafzai’s birthday. As an activist, advocate for girls’ education, champion of human rights and Nobel Peace Prize winner, Malala’s words and actions offer inspiration and hope to people all over the world.<br>In 2012, a Taliban gunman shot Malala as she travelled home from school. She was 15-years-old, and had already been advocating for girls’ right to education in her home country of Pakistan for several years.<br>One year later, on her 16th birthday, Malala gave a speech at the UN that cemented her position as one of the most inspiring, influential, and importantly young people alive today. In the 4 years since that speech, Malala has turned a personal passion into a powerful international movement working to transform the future – not only for girls and women but for the world at large.<br>The same summer that Malala spoke at the UN, I graduated from university. In the years since that speech, I have been working to build my career in gender equality and human rights. As I’ve done so I’ve tried to learn as much as I can about what it takes to create change in the world and what it means to be successful.<br>Some of the most invaluable lessons I have learned so far – in both my professional and personal life – have been from the women I admire and look to as role models. Women like Malala.<br>And yes, she may be young, but the world seems finally to be getting the message _ to underestimate young women at your peril. I believe there is so much we can learn from Malala Yousafzai, and so in honor of her birthday, I’ve made a list of 5 lessons she’s taught me in my career so far!<br>1. Speak up<br>“We realize the importance of our voices only when we are silenced.”<br>It can sometimes be easy to take the freedom to raise my voice, and especially the freedom to do so in safety, for granted. Malala reminds me that there are millions of girls and women without that luxury, and if we can do so must use our voices to make sure that those who are silenced can be heard.<br>2. Be brave<br>“There’s a moment when you have to choose whether to be silent or to stand up.”<br>Malala’s story is one of immense courage. She has continued to fight for what she knows to be right in the face adversity that many could scarcely imagine, and she stands up time and time again against fear and threats and violence. Her bravery encourages me to be bolder and her refusal to give in to fear reminds me that I should do the same.<br>3. Be determined<br>“I’m just a committed and stubborn person who wants to see every child get [a] quality education – who wants to see women having equal rights and who wants peace in every corner of the world.” <br>No matter what else is happening around her, Malala never wavers from her commitment to girls’ education. I often feel frustrated when it seems that change happens far too slowly – but Malala shows me the value of dedication and conviction.<br>4. Be knowledgeable<br>“None of the nine biggest countries in Africa, Latin America and developing Asia have increased their education budgets. Several are even making drastic cuts, putting more girls out of school.”<br>Malala’s knowledge when it comes to her cause reminds me that if I want to change something, I have to understand how it works in the first place. It’s clear that Malala understands the issues facing countries around the world preventing girls from accessing education, and it’s that knowledge that makes people listen up and take her seriously.<br>5. Be humble <br>“I tell my story not because it is unique, but because it is not. It is the story of many girls.”<br>Despite her many achievements, awards, and fame (she is the youngest person ever to win a Nobel Prize) Malala always speaks and acts with kindness, grace, and humility. It might not be specific to work in gender equality, but it’s a quality I admire and try to replicate all the same!<br>Feeling inspired? Follow Malala on Twitter, make a donation to the Malala Fund, watch He Named Me Malala or check out her interview with David Letterman.",
+    "author": "Eleanor Gall",
+    "img_url": "../../images/leon-biss.jpg"
+  }
+]

src/components/navbar/NavBar.css

@@ -13,7 +13,7 @@
 
 /* bootstrap class */
 .navbar-light .navbar-nav .nav-link {
-  color: #6c567b;
+  color: #6c567b !important;
   font-style: normal;
   font-weight: normal;
   font-size: 14px;
@@ -27,12 +27,12 @@
 
 /* bootstrap class */
 .navbar-light .navbar-nav .nav-link:hover {
-  color: #f8b195;
+  color: #f8b195 !important;
   justify-content: flex-end;
 }
 
 .navbarBrand {
-  margin-left: 7em;
+  margin-left: 3em;
 }
 
 .brandLogo {
@@ -53,18 +53,18 @@
   width: 6em;
   height: 2.3em;
   margin: 0.3em;
-  border-radius: 40px;
+  border-radius: 40px !important;
 }
 
 .signupFilledButton {
-  background-color: #6c567b;
+  background-color: #6c567b !important;
   outline: none;
   border: none;
 }
 
 .loginOutlinedButton {
-  color: #f8b195;
-  border-color: #f8b195;
+  color: #f8b195 !important;
+  border-color: #f8b195 !important;
 }
 
 .signupFilledButton:hover {
@@ -110,7 +110,7 @@
 /* bootstrap class */
 .dropdown-toggle::after {
   color: #f8b195;
-  margin-right: 5em;
+  margin-right: 3em;
 }
 
 /* bootstrap class */

src/components/single-article/SingleArticle.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function SingleArticle() {
+ return (
+  <div>
+
+  </div>
+ )
+}

yarn.lock

@@ -2907,11 +2907,6 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
-  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"