merge

src/commons/Colors.js

@@ -3,10 +3,13 @@ const Colors = {
   BASE_DARK2: '#191F28',
   BASE_DARK3: '#727272',
   BASE_DARK4: '#BFBFBF',
+  BASE_DARK5: '#545454',
+  BASE_DARK6: '#3E3E3E',
 
   HIGHLIGHT1: '#4A72D9',
   HIGHLIGHT2: '#474747',
   HIGHLIGHT3: '#35446A',
+  HIGHLIGHT4: '#BEBEBE',
 
   FONT1: '#C5C5C5',
 

src/components/AddTorrentModal/AddTorrentModal.component.js

@@ -0,0 +1,41 @@
+import PropTypes from "prop-types";
+import React from 'react';
+
+import { downloadTorrent } from '../../api/torrents';
+import { Dialog, Form} from './AddTorrentModal.styles';
+
+const AddTorrentModal = ({ setIsDialogOpen }) => {
+    const sendForm = (e) => {
+        e.preventDefault();
+        const torrentId = e.target[0].value;
+        downloadTorrent(torrentId);
+        setIsDialogOpen(false)
+    }
+
+    return(
+        <Dialog>
+            <Form onSubmit={sendForm}>
+                <input 
+                    type="text"
+                    id="torrent"
+                    placeholder="Enter torrent ID"
+                    autoComplete="off"
+                />
+                <input type="submit" value="Download" />
+            </Form>
+            <button
+                style={{ color: 'white', cursor: 'pointer' }}
+                type="button"
+                onClick={() => setIsDialogOpen(false)}
+            >
+                Cancel
+            </button>
+        </Dialog>
+    )
+}
+
+AddTorrentModal.propTypes = {
+  setIsDialogOpen: PropTypes.func.isRequired
+}
+
+export default AddTorrentModal;

src/containers/TopBar/TopBar.styles.js → src/components/AddTorrentModal/AddTorrentModal.styles.js

@@ -2,46 +2,6 @@ import styled from 'styled-components';
 
 import Colors from '../../commons/Colors';
 
-export const TopBarContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 4.3rem;
-  background-color: ${Colors.BASE_DARK2};
-`;
-
-export const TopBarContent = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  padding: 0 1.125rem;
-`;
-
-export const ActionButtonsContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const ActionButton = styled.button`
-  display: flex;
-  align-items: center;
-  outline: 0;
-  background-color: transparent;
-  border: none;
-  border-radius: 3px;
-  color: ${Colors.NEUTRAL_WHITE};
-  font-weight: 600;
-  font-size: 15px;
-  padding: 0.55rem 1rem;
-  cursor: pointer;
-  transition: 0.3s;
-  margin-right: 1.2rem;
-  &:hover {
-    background-color: ${Colors.HIGHLIGHT2};;
-  }
-`;
-
 export const Dialog = styled.div`
   display: flex;
   flex-direction: column;
@@ -82,3 +42,11 @@ export const Form = styled.form`
     }
   }
 `;
+
+export const Input = styled.input`
+
+`;
+
+export const Button = styled.button`
+
+`;

src/components/searchbox/SearchBox.styles.js

@@ -9,7 +9,7 @@ export const SearchBoxContainer = styled.div`
   align-items: center;
   height: 36px;
   width: 100%;
-  background-color: ${Colors.BASE_DARK4};
+  background-color: ${Colors.BASE_DARK6};
   padding: 0 0.6rem;
   border-radius: 4px;
 `;
@@ -22,7 +22,7 @@ export const SearchIcon = styled(Vectors.searchIcon)`
 `;
 
 export const ClearInputIcon = styled(Vectors.deleteIcon)`
-  stroke: ${Colors.BASE_DARK5};
+  stroke: ${Colors.HIGHLIGHT4};
   width: 32px;
   cursor: pointer;
 `;