From 2d06e0fb12b3f7634cb5868a0a288640f67136cd Mon Sep 17 00:00:00 2001
From: KeviNmp4 <matej.kevin.nechodom@gmail.com>
Date: Sun, 12 May 2024 21:26:44 +0200
Subject: [PATCH] Added: custom style for DropDownPicker, added icons for
 DropDownPicker, in style.js added new color for placeholder; Edited:
 Component for button, where you can now define background, border, ... by
 class

---
 frontend/app/(app)/(tabs)/beer/add.js        |  57 +++++--
 frontend/assets/DropdownIcons/arrow-down.png | Bin 0 -> 522 bytes
 frontend/assets/DropdownIcons/arrow-up.png   | Bin 0 -> 807 bytes
 frontend/assets/DropdownIcons/close.png      | Bin 0 -> 338 bytes
 frontend/assets/DropdownIcons/tick.png       | Bin 0 -> 1214 bytes
 frontend/components/Button.js                |   7 +-
 frontend/components/DropdownTheme.js         | 170 +++++++++++++++++++
 frontend/components/style.js                 |   1 +
 8 files changed, 221 insertions(+), 14 deletions(-)
 create mode 100644 frontend/assets/DropdownIcons/arrow-down.png
 create mode 100644 frontend/assets/DropdownIcons/arrow-up.png
 create mode 100644 frontend/assets/DropdownIcons/close.png
 create mode 100644 frontend/assets/DropdownIcons/tick.png
 create mode 100644 frontend/components/DropdownTheme.js

diff --git a/frontend/app/(app)/(tabs)/beer/add.js b/frontend/app/(app)/(tabs)/beer/add.js
index cb38922..0bdb726 100644
--- a/frontend/app/(app)/(tabs)/beer/add.js
+++ b/frontend/app/(app)/(tabs)/beer/add.js
@@ -1,9 +1,12 @@
 import { StyleSheet, TextInput, View, Image } from "react-native";
 import { useState } from "react";
 import Button from "@components/Button";
+import Text from "@components/Text";
 import { colors } from "@components/style";
 import * as ImagePicker from "expo-image-picker";
 import DropDownPicker from "react-native-dropdown-picker";
+/* import DropdownTheme from "@components/DropdownTheme"; */
+const DropdownTheme = require("@components/DropdownTheme");
 
 export default function BeerAdd() {
 	const [b_name, setBName] = useState("");
@@ -16,13 +19,16 @@ export default function BeerAdd() {
 	const [open, setOpen] = useState(false);
 	const [value, setValue] = useState(null);
 	const [items, setItems] = useState([
-		{ label: "Can", value: "can" },
+		{ label: "Tank beer", value: "tank" },
+		{ label: "Cask beer", value: "cask" },
 		{ label: "Glass bottle", value: "glass" },
-		{ label: "Oddel barrel", value: "barrel" },
-		{ label: "Tank", value: "tank" },
-		{ label: "PET bottle", value: "PET" },
+		{ label: "Can", value: "can" },
+		{ label: "PET bottle", value: "pet" },
 	]);
 
+	DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
+	DropDownPicker.setTheme("DropdownTheme");
+
 	ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
 	const pickImage = async () => {
 		const permissionResult =
@@ -96,6 +102,9 @@ export default function BeerAdd() {
 	return (
 		<View style={styles.container}>
 			<View style={styles.form}>
+				<Text style={styles.text}>
+					Spill your thoughts about the beer you just sipped!
+				</Text>
 				<TextInput
 					style={styles.input}
 					placeholder="Name"
@@ -132,20 +141,26 @@ export default function BeerAdd() {
 					setValue={setValue}
 					setItems={setItems}
 					placeholder={"What are you drinking from?"}
-					theme="DARK"
+					theme="DropdownTheme"
 				/>
 				<View style={styles.imageContainer}>
 					<Button
-						style={styles.imageButton}
-						title="Pick an image from gallery"
+						title="Open gallery"
 						onPress={pickImage}
+						buttonStyle={styles.imageButton}
+						textStyle={styles.imageTextButton}
 					/>
 
-					<Button onPress={openCamera} title="Open camera" />
+					<Button
+						onPress={openCamera}
+						title="Open camera"
+						buttonStyle={styles.imageButton}
+						textStyle={styles.imageTextButton}
+					/>
 
 					{image && <Image source={{ uri: image }} style={styles.image} />}
 				</View>
-				<Button title="Add beer" color={colors.green} onPress={addBeer} />
+				<Button title="Add beer" color={colors.gold} onPress={addBeer} />
 			</View>
 		</View>
 	);
@@ -162,6 +177,7 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 		paddingTop: "10%",
 		gap: 15,
+		width: "80%",
 	},
 	input: {
 		height: "auto",
@@ -172,16 +188,31 @@ const styles = StyleSheet.create({
 		padding: 13,
 		color: "#fff",
 	},
-	imageButton: {
-		width: "100%",
-		backgroundColor: "#FFD700",
-	},
 	imageContainer: {
 		alignItems: "center",
 		justifyContent: "center",
+		display: "flex",
+		flexDirection: "row",
+		gap: 10,
+	},
+	imageButton: {
+		backgroundColor: colors.dark,
+		borderColor: "gray",
+		borderWidth: 1,
+		borderRadius: 10,
+	},
+	imageTextButton: {
+		color: colors.white,
 	},
 	image: {
 		width: 150,
 		height: 150,
 	},
+	text: {
+		color: colors.white,
+		fontSize: 24,
+		textAlign: "center",
+		paddingTop: "3%",
+		paddingBottom: "3%",
+	},
 });
diff --git a/frontend/assets/DropdownIcons/arrow-down.png b/frontend/assets/DropdownIcons/arrow-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..00ecf8607d5e6755256855b1c5ec2e5cd0928472
GIT binary patch
literal 522
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=EX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2HCYdl>XLn`LHy}mK;a)3nJ!|w;4aQ^;(_4O+j=e8*Zhh?{hI5|Bk
z)5=?5eS<}8b3(a?me3TIzQ@IULHpfL3254V{H`U(qyz__!q0D8|KD}r@0EAOxBf0K
zj=%n{TPMD%X{PS$Wj_<&WgAyZR@Zj?-LtcvIWFfuf6wDpuXpipjJIJou6E|Q{^#Du
zt=YG`XBaR0lhd~Mwet?s%}-m3&lM%uJT~A_*R#|xJ794jn#<k7MD7Rco^IRMm2X(>
zfB!2E4gKCyu(O!CQ9y6?s$K7Y|I_<+Mj~ySQj7FI3Ht+AcfGbdI!|1dVZr;~yM+X|
zJzjtF|I@r<+ut77O!wnr_^G@^f<K+5p++#Mx80c8;TK2Rx2oS~&fCeQaWK48S|Z19
z%-Zl%`H2L-F<Zk=r6*GS#_SEBm1o=(RotU~xWYq#VVV00TR9=th94ZN$D9u_e0VSD
z)tml&*(9UQs)~0u*%u_pgy%GgNb=8QI?%}>?Rw1lk$b}Ri^m^c*uTr?v0^fVh1A2q
zZyzUEGRX7>q|^j%{e9?8bn*X7CTCY)`mPKQTK~h$>hY=%&!6ax2Sz4?r>mdKI;Vst
E04{0UfB*mh

literal 0
HcmV?d00001

diff --git a/frontend/assets/DropdownIcons/arrow-up.png b/frontend/assets/DropdownIcons/arrow-up.png
new file mode 100644
index 0000000000000000000000000000000000000000..b82e9dd1a6fc3eb7003c8f852d60bc73d07c4ef8
GIT binary patch
literal 807
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=EX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2GXCp}#pLn`LHopCzvvV%z5|Hpb!)<UPw{3v`NsIWF-!7|-kP2CSp
zch+kK=yAuj#zkDX#J$16W25ZG4-rZqHyj8PHeXnpv|H!g_RlBm?EXKOJe}N-DA9(3
zyxchoeK|gE);q$l`Sj}NSIy@hFDqU8O!omRgSO<WSr+rSn;zs|-Rl!l>%8;|)7N%(
zhVG8EWm#MAYVee=db2!;G3eB5g{r=PA2h`njf1z|ikm8=B|M>}zU|)!Lx$$ZOEUxw
zVwbi!`Y$S2GNrruknjeU<Y^znT~4t`ZjK9I73rG4^gM&+Q=yJ|Ne&g~KVRE=ZT7ZY
z`NkEEXMARq%=zo_`mND#?a+oPMUpQ56FB9WyBnYH^<m#~ZFb*d8Kx6n8B=r@ngE?3
ztx(nT@55b*h@9$stKa;LdcF4Zgn+JwJr9GoT#KIESL|@W#80oi+2i%vMb)}7K;u+7
z@Bf~7wYTwg?)mE4TVF3GaE454abo3A%$t;I>!h|vF)E|_-m%Enf4rL>TeR<T;B4g-
zShw5Dh2K!2=0et7%Nj4GM0;&Uhr`?6DzE*T#+WOv?6BjVmgHv!)>i+{E%*FXObY(k
zDGG?HCFU?5D!ty;GM_(ct@-0?_O6Gn7pnHCI%t%3H~c=)*8h0tf$!Y6Z>kFIQ#rjb
z{E+DFZTmCV+V@3Or!YFLyv=gw@W~Hn6*%toMwLsXdP;aY#ICd!D-i$t(E8-OeIGt(
zPP}#-80z-~IPbepoDdE4S!>6p%lnv<XE_S&IUlXBA1LvTXJSF+l=m%r>RVQ<3%Sjt
z_ob&a!RPY#zn2bwSBfd0))VRe-}y_;`Qp!4PVSZ6)^OjpT~@+4y0n6UBWf+LvkCu#
z*?mU~@0^TQ|1MM@^SqcRMrDETflcp!%YVA2(FIHfIk*3bNEe?J_}i4a)-`cQb=+SA
hp2JA!^Z(E6b1u32uYGE}2AI+rJYD@<);T3K0RWI`YOeqQ

literal 0
HcmV?d00001

diff --git a/frontend/assets/DropdownIcons/close.png b/frontend/assets/DropdownIcons/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..dda7a6dd4f9207767533335806dc0417e0ed01c7
GIT binary patch
literal 338
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=oCO|{#S9GG!XV7ZFl&wk0|O(A
zr;B4q#hkaZtoaTZ2)MZ4G4R#8zyE|RlSqXM3m?~nHTK5-MSDM+720iMOztr}CXw88
z^EgYw$>eo&SSwNz=4mc^!1Q3+aV`Z{k-G{{dCqKh5vk2{IIFhjRJ&<{o=9JwlV_dl
zgDH2o1TMDB+Pa!O(`}#If@e=WT{fgWJvozc_H^}hmbY&6WF&W3R~ET^$a{Lyp6TxC
z$?-026V>l?@T&WN>)_S)x8vl~_xD<K-KK52`ckzMCnmRiUwv-3V$46G*Z|p=nhJjf
zrquCz)pK~(b9w*g@%+!{t>59H-|4B}<)z>4o!{e;-|Ly*=at`oT7JR=dnM(153heS
g=74=;xUBx&i@4ccQ@#Jb1_ly?r>mdKI;Vst08z_;YybcN

literal 0
HcmV?d00001

diff --git a/frontend/assets/DropdownIcons/tick.png b/frontend/assets/DropdownIcons/tick.png
new file mode 100644
index 0000000000000000000000000000000000000000..53478c4d81800d9fe51376cfc8a13fe053a653ff
GIT binary patch
literal 1214
zcmV;v1VQ_WP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm000XU000XU0RWnu7ytkSU`a$lRCt{2m|KV(MHGhrQ@fk(?%7~h
zRf8Zt_$=s?ifBxTF;Pi^5#6jYhM)vRR=gmhh-iq2c)<&zh$zu$NMg|7Es-Szg9bzs
z@maiJBBC%|od=m}Os0+xW|Eo7Br~(!yY5JRZ+)uk{O3P?t7^dG@pwEQkH_Qjcsw4D
zXTZ@~Um9yYrL^81$MHqo&L5tQqGk&z<&|~k_6Q;70|17GE&y=h+2)8@sB2b`QZ8WN
z^ONQQ2;jVK^ZpkNh?C?h2KERc#+u^{Jl$>Xz&9XHl7*<(JDJ~<rRg)><`2zWX){lp
zB#Th5?-oK-S_YUmX2xvnCC9)vKx@62o%^hV`6rAqn|jSNkPXmUUtM?ZQz1muGQj+}
zG3LpBa#5+3%>r8MC3WXM5kiD51I&*ZW1i|a-#|4$DRqrw{<wqrM~yLE-}s#vn1zs1
zYMEpHNC*)$#~FAeGp6g?{!9$SJ3vZ#Ed!m*Kb)oMvqf^x`A0xXc^w10I+%YbOVj6z
z=AY9IkWyYxM7uyV+8k%+9?Y`rg)%he>?05-$#MaF*lr%o4`f;PVp%$K@(zfTWQAb<
z0KmMK0p|OSF)x>?)pakRwZ5cje|>S8;+=@KUU>%d_m*uQ=;02CwLT(%^G_URf@o>A
zT0K;DApoGYzJY=F(Po~2d(t$0btW{s-2uY_IJfCoI_AAfsmsbPL~Ff@ft_eI&kmTJ
zDf2-01{`PLxwcpgqA8`+<z*G2l)CZ6l^<yevjZlNrs->C>2#v&S0J}`Ul@k-L3Bk^
zIB?7pVHobu^ZZDW0+doWfoKQX%rkKJ(KLO%NbX+f=`(1poeIM+1kr*<jEF{=c_J7a
z`zo*14o^p1DRnc5wxe}P&P;SymZon^CuhI(ybiF|?hT@7gn)&O7!l25=T-+}V+ZnD
z?bm*Ul~Us%+J<)X&fS?A^JYJ}iqO|WD7SWB5JiH3MU7aa36)CaYisQ<z2uQnPLL2=
z(PkdZ8?r2WtDl;R()UU*xAu!L3>id=8!;jpan7xdqUalI?aybMFO%dJB5F79z`Vg2
zv$@}TiZZRGu(fu77>36{w4@Ouq7lbD9){t;JkNjXG*2eU8e)F0P1k|>4r9#Q)2XE>
z)7}eMYrhPl$P%!$5hJ2u0>*<NIF#r4kIm=DTCWwr7MyPWc4N$z>DEz{LYtx7+5<rp
z{YAjClR=_kA{rm9RKCw^wI2XLYrT$uciQxv1J-B8yj!G(qLi{3QcB$iqL<pje-p5p
zna=^yX0$H4>JC_cG)=dbp<jg3c7s~$Nd{hN%Xtj{UiB99OtdbmR=1U<U4+v92Uu&r
z4Wj5z0+!=c6Nb>*kUA6HmQ}0U%hD}MsXs(=YYzsM%I^fM!0C6_advKPX3UN<HH%XE
zAECTf`z{Q_!ysCTQ%yJy=3BEY+gY~WoJA(dnpny|Vy%DETCe)A>+yIz9*@W4@pwEQ
ckLMKs05(p4ZxrqrKmY&$07*qoM6N<$f<xOqZU6uP

literal 0
HcmV?d00001

diff --git a/frontend/components/Button.js b/frontend/components/Button.js
index 41f0b08..04504fd 100644
--- a/frontend/components/Button.js
+++ b/frontend/components/Button.js
@@ -7,6 +7,8 @@ export default function Button(props) {
 		title = "Button",
 		color = "black",
 		textColor = "white",
+		buttonStyle,
+		textStyle,
 	} = props;
 	return (
 		<Pressable
@@ -19,10 +21,13 @@ export default function Button(props) {
 							: "black",
 				},
 				styles.button,
+				buttonStyle,
 			]}
 			onPress={onPress}
 		>
-			<Text style={[styles.text, { color: textColor }]}>{title}</Text>
+			<Text style={[styles.text, { color: textColor }, textStyle]}>
+				{title}
+			</Text>
 		</Pressable>
 	);
 }
diff --git a/frontend/components/DropdownTheme.js b/frontend/components/DropdownTheme.js
new file mode 100644
index 0000000..3c204cb
--- /dev/null
+++ b/frontend/components/DropdownTheme.js
@@ -0,0 +1,170 @@
+import { StyleSheet } from "react-native";
+
+import { colors } from "@components/style";
+
+export const ICONS = {
+	ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
+	ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
+	TICK: require("@assets/DropdownIcons/tick.png"),
+	CLOSE: require("../assets/DropdownIcons/close.png"),
+};
+
+export default StyleSheet.create({
+	container: {
+		width: "100%",
+	},
+	style: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: "100%",
+		minHeight: 50,
+		borderRadius: 8,
+		borderWidth: 1,
+		borderColor: "gray",
+		paddingHorizontal: 10,
+		paddingVertical: 3,
+		backgroundColor: colors.dark,
+	},
+	label: {
+		flex: 1,
+		color: colors.placeholder,
+	},
+	labelContainer: {
+		flex: 1,
+		flexDirection: "row",
+	},
+	arrowIcon: {
+		width: 20,
+		height: 20,
+	},
+	tickIcon: {
+		width: 20,
+		height: 20,
+	},
+	closeIcon: {
+		width: 30,
+		height: 30,
+	},
+	badgeStyle: {
+		flexDirection: "row",
+		alignItems: "center",
+		borderRadius: 15,
+		backgroundColor: colors.white,
+		paddingHorizontal: 10,
+		paddingVertical: 5,
+	},
+	badgeDotStyle: {
+		width: 10,
+		height: 10,
+		borderRadius: 10 / 2,
+		marginRight: 8,
+		backgroundColor: colors.white,
+	},
+	badgeSeparator: {
+		width: 5,
+	},
+	listBody: {
+		height: "100%",
+	},
+	listBodyContainer: {
+		flexGrow: 1,
+		alignItems: "center",
+	},
+	dropDownContainer: {
+		position: "absolute",
+		backgroundColor: colors.darkSecondary,
+		borderRadius: 10,
+		borderColor: colors.black,
+		borderWidth: 1,
+		width: "100%",
+		overflow: "hidden",
+		zIndex: 1000,
+	},
+	modalContentContainer: {
+		flexGrow: 1,
+		backgroundColor: colors.white,
+	},
+	listItemContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingHorizontal: 10,
+		height: 40,
+	},
+	listItemLabel: {
+		flex: 1,
+		color: colors.placeholder,
+	},
+	iconContainer: {
+		marginRight: 10,
+	},
+	arrowIconContainer: {
+		marginLeft: 10,
+	},
+	tickIconContainer: {
+		marginLeft: 10,
+	},
+	closeIconContainer: {
+		marginLeft: 10,
+	},
+	listParentLabel: {},
+	listChildLabel: {},
+	listParentContainer: {},
+	listChildContainer: {
+		paddingLeft: 40,
+	},
+	searchContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		padding: 10,
+		borderBottomColor: colors.darkSecondary,
+		borderBottomWidth: 1,
+	},
+	searchTextInput: {
+		flexGrow: 1,
+		flexShrink: 1,
+		margin: 0,
+		paddingHorizontal: 10,
+		paddingVertical: 5,
+		borderRadius: 8,
+		borderColor: colors.darkSecondary,
+		borderWidth: 1,
+		color: colors.white,
+	},
+	itemSeparator: {
+		height: 1,
+		backgroundColor: colors.darkSecondary,
+	},
+	flatListContentContainer: {
+		flexGrow: 1,
+	},
+	customItemContainer: {},
+	customItemLabel: {
+		fontStyle: "italic",
+	},
+	listMessageContainer: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		padding: 10,
+	},
+	listMessageText: {
+		color: colors.gold,
+	},
+	selectedItemContainer: {},
+	selectedItemLabel: {},
+	modalTitle: {
+		fontSize: 18,
+		color: colors.gold,
+	},
+	extendableBadgeContainer: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		flex: 1,
+	},
+	extendableBadgeItemContainer: {
+		marginVertical: 3,
+		marginEnd: 7,
+	},
+});
diff --git a/frontend/components/style.js b/frontend/components/style.js
index 9c56c5b..f11f030 100644
--- a/frontend/components/style.js
+++ b/frontend/components/style.js
@@ -8,4 +8,5 @@ export const colors = {
 	dark: "#010409",
 	darkSecondary: "#0D1117",
 	white: "#FFFFFF",
+	placeholder: "#aaaaaa",
 };