added a star wars theme to bot collection

MartinNyaga · Dec 20, 2023 · f0dc04f · f0dc04f
1 parent a0c16fe
commit f0dc04f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -56,6 +56,7 @@ div {
 .sort-bar label,
 .sort-bar select {
   margin-right: 10px;
+  color: #ffa500;
 }
 
 
@@ -69,4 +70,36 @@ div {
 }
 
 
+.star-wars-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px;
+}
+
+.star-wars-bot {
+  border: 1px solid #fff;
+  padding: 15px;
+  margin: 10px;
+  cursor: pointer;
+  background-color: #000; 
+  color: #fff; 
+}
+
+.star-wars-avatar {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.star-wars-name {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #ffa500; 
+}
+
+
+
 
diff --git a/src/components/BotCollection.js b/src/components/BotCollection.js
@@ -15,13 +15,13 @@ export default function BotCollection({bots, addToArmy, sortBy}){
 
     //Renderd bots
         return(
-            <div className="container">
+            <div className="star-wars-container">
                 {sortedBots.map((bot) => (
-                    <div className="element" key={bot.id} onClick={()=> addToArmy(bot)} >
+                    <div className="star-wars-bot" key={bot.id} onClick={()=> addToArmy(bot)} >
 
-                        <img src={bot.avatar_url} alt={bot.name}/>
+                        <img className="star-wars-avatar" src={bot.avatar_url} alt={bot.name}/>
 
-                        <h3>Bot Name:  {bot.name}</h3>
+                        <h3 className="star-wars-name">Bot Name:  {bot.name}</h3>
                         <p>Class :  {bot.bot_class}</p>
                         <p>Catch Phrase :  {bot.catchphrase}</p>
                         <p>Armor :  {bot.armor}</p>